Hướng dẫn check mark icon css

How to draw the tick symbol using CSS? The symbols I find using Unicode isn't aesthetically-pleasing.

EDIT Icon fonts are a great suggestion. I was looking for something like this.

jbutler483

23.3k9 gold badges87 silver badges141 bronze badges

asked Feb 23, 2014 at 12:59

5

You can draw two rectangles and place them next to each other. And then rotate by 45 degrees. Modify the width/height/top/left parameters for any variation.

DEMO 1

DEMO 2 (With circle)

HTML

CSS

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#ccc;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#ccc;
    left:8px;
    top:12px;
}

answered Feb 23, 2014 at 12:59

dayulolidayuloli

15.3k15 gold badges65 silver badges115 bronze badges

5

Here is another CSS solution. its take less line of code.

ul li:before
{
    content: '\2713';
    display: inline-block;
    color: red;
    padding: 0 6px 0 0;
}

ul li
{
    list-style-type: none;
    font-size: 1em;
}


    
test1
    
test

Here is the Demo link http://jsbin.com/keliguqi/1/

Pikamander2

6,2933 gold badges42 silver badges63 bronze badges

answered Feb 23, 2014 at 13:12

Kheema PandeyKheema Pandey

9,7894 gold badges24 silver badges26 bronze badges

2

Do some transforms with the letter L

.checkmark {
  font-family: arial;
  -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
  -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
  transform: scaleX(-1) rotate(-35deg);
}

L

answered Mar 18, 2015 at 12:15

HenryHenry

9811 gold badge13 silver badges14 bronze badges

2

only css, quite simple I find it:

.checkmark {
      display: inline-block;
      transform: rotate(45deg);
      height: 25px;
      width: 12px;
      margin-left: 60%; 
      border-bottom: 7px solid #78b13f;
      border-right: 7px solid #78b13f;
    }

habib

1,05513 silver badges27 bronze badges

answered Feb 20, 2020 at 14:29

PetronellaPetronella

2,1101 gold badge13 silver badges23 bronze badges

0

You can now include web fonts and even shrink down the file size with just the glyphs you need. https://github.com/fontello/fontello http://fontello.com/

li:before {
  content:'[add icon symbol here]';
  font-family: [my cool web icon font here];
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  color: #999;
}

answered Feb 23, 2014 at 14:18

JohanVdRJohanVdR

2,8281 gold badge12 silver badges15 bronze badges

An additional solution, for when you only have one of the :before / :after psuedo-elements available, is described here: :after-Checkbox using borders

It basically uses the border-bottom and border-right properties to create the checkbox, and then rotates the mirrored L using transform

Example

li {
  position: relative; /* necessary for positioning the :after */
}

li.done {
  list-style: none; /* remove normal bullet for done items */
}

li.done:after {
  content: "";
  background-color: transparent;
  
  /* position the checkbox */
  position: absolute;
  left: -16px;
  top: 0px;

  /* setting the checkbox */
    /* short arm */
  width: 5px;
  border-bottom: 3px solid #4D7C2A;
    /* long arm */
  height: 11px;
  border-right: 3px solid #4D7C2A;
  
  /* rotate the mirrored L to make it a checkbox */
  transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

To do:

  
Great stuff
  
Easy stuff
  
Difficult stuff

answered Feb 28, 2015 at 2:06

PhilipPhilip

2,7862 gold badges19 silver badges35 bronze badges

5

I've used something similar to BM2ilabs's answer in the past to style the tick in checkboxes. This technique uses only a single pseudo element so it preserves the semantic HTML and there is no reason for additional HTML elements.

Simple, semantic, without any dependencies or additional HTML.

label {
  cursor: pointer;
}

input[type="checkbox"] {
  position: relative;
  top: 2px;
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  margin: 0 5px 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 2px;
  background-color: #fff;
  border: 1px solid #b7b7b7;
}

input[type="checkbox"]:before {
  content: '';
  display: block;
  transition: transform 200ms;
}

input[type="checkbox"]:checked:before {
  width: 4px;
  height: 9px;
  margin: 0px 4px;
  border-bottom: 2px solid #115c80;
  border-right: 2px solid #115c80;
  transform: rotate(45deg);
}

  Label

answered Jan 6, 2020 at 13:14

matthewdmatthewd

2934 silver badges9 bronze badges

1

Try this // html example

✓

// css example

span {
  content: "\2713";
}

answered May 7, 2019 at 6:26

silvedosilvedo

1111 silver badge3 bronze badges

1

i like this way because you don't need to create two components just one.

.checkmark:after {
    opacity: 1;
    height: 4em;
    width: 2em;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 2px solid #5cb85c;
    border-top: 2px solid #5cb85c;
    content: '';
    left: 2em;
    top: 4em;
    position: absolute;
}

Animation from Scott Galloway Pen

answered Mar 14, 2018 at 11:43

BM2ilabsBM2ilabs

4226 silver badges9 bronze badges

I suggest to use a tick symbol not draw it. Or use webfonts which are free for example: fontello[dot]com You can than replace the tick symbol with a web font glyph.

Lists

ul {padding: 0;}
li {list-style: none}
li:before {
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  content: '✔';
  color: #999;
}

See here: http://jsfiddle.net/hpmW7/3/

Checkboxes

You even have web fonts with tick symbol glyphs and CSS 3 animations. For IE8 you would need to apply a polyfill since it does not understand :checked.

input[type="checkbox"] {
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
  content:'';
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  border: 1px solid #999;
  border-radius: 0.3em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
}
input[type="checkbox"]:checked + label:before {
  content: '✔';
  color: green;
}

See the JS fiddle: http://jsfiddle.net/VzvFE/37

answered Feb 23, 2014 at 13:55

JohanVdRJohanVdR

2,8281 gold badge12 silver badges15 bronze badges

li:before {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 9px;
    margin-left: -15px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
li:after {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 20px;
    margin-left: -11px;
    margin-top: -6px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

answered Jul 9, 2014 at 12:54

After some changing to above Henry's answer, I got a tick with in a circle, I came here looking for that, so adding my code here.

.snackbar_circle {
  background-color: #f0f0f0;
  border-radius: 13px;
  padding: 0 5px;
}

.checkmark {
  font-family: arial;
  font-weight: bold;
  -ms-transform: scaleX(-1) rotate(-35deg);
  -webkit-transform: scaleX(-1) rotate(-35deg);
  transform: scaleX(-1) rotate(-35deg);
  color: #63BA3D;
  display: inline-block;
}

   L

answered Feb 19, 2021 at 13:26

GameChangerGameChanger

3003 silver badges15 bronze badges

You might want to try fontawesome.io

It has great collection of icons. For you should work. There are many check icons in this too. Hope it helps.

answered Apr 29, 2017 at 13:37

Also, using the awesome font, you can use the following tag. Simple and beautiful

With the possibility of changing the size and color and other features in CSS

See result here

answered Aug 22, 2020 at 8:15

This is my variant for making 'checked' buttons

HTML

JavaScript

function clickMe(data) {
  data.classList.add("checked");
}

CSS

.unchecked::before { content: "C"; }
.unchecked { border-radius: 50%; outline: none; }
.checked::before { content: "L"; }
.checked { background-color: green; transform: rotate(45deg) scaleX(-1); }

answered Mar 18, 2021 at 0:38

1000Gbps1000Gbps

1,3511 gold badge29 silver badges33 bronze badges

We can use CSS pseudo-element to make the checkmark/tick sign. Suppose, we have a span tag in our HTML and we want to place out checkmark before the span. We can simply do this:

Some Text

Now, we can add the CSS like this:

span.check_text:before {
    position: absolute;
    height: 15px;
    width: 5px;
    border-bottom: 3px solid red;
    border-right: 3px solid red;
    content: "";
    transform: rotate(45deg);
    left: -25px;
    top: 2px;
}

answered Apr 11 at 12:18

If you want a tick, you probably also want a cross, with background colours.

.icon {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  transform: rotate(45deg);
}
.icon::before, .icon::after { position: absolute; content: ''; background-color: #fff; }
.icon.icon-success          { background: green; }
.icon.icon-success:before   { width:  3px; height:  9px; top:  6px; left: 11px; }
.icon.icon-success:after    { width:  3px; height:  3px; top: 12px; left:  8px; }
.icon.icon-failure          { background: lightcoral; }
.icon.icon-failure::before  { width:  3px; height: 12px; top:  5px; left: 10px; }
.icon.icon-failure::after   { width: 12px; height:  3px; top: 10px; left:  5px; }

answered Jun 28 at 12:03

lonixlonix

9,38312 gold badges59 silver badges122 bronze badges

This is simple css for Sign Mark.

ul li:after{opacity: 1;content: '\2713';right: 20px;position: absolute;font-size: 20px;font-weight: bold;}

answered Sep 22, 2019 at 5:13

1