How to draw a checkmark / tick using CSS?

Question

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.

Answer 1

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

<span class="checkmark">     <div class="checkmark_stem"></div>     <div class="checkmark_kick"></div> </span> 

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; } 

Answer 2

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; }  <ul>     <li>test1</li>     <li>test</li> </ul> 

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