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