HTML Symbol for Check Mark and Others

Here is another hurriedly written post but have some meaning to share with you. I got a promo mock up and there was a check mark (tick mark) symbol that is generally available in MS word. For that list items, I need image to use with CSS (list-style-image:url();). and that kind of nice image I cannot create. I am not a graphics guy.

I searched on net and could land on the search result that was good enough to use on promo page. Just mind clicked about the HTML entities and started searching HTML entities for tick mark.

I have found entity code for check mark but that was not working both in IE and Firefox. It was either working on Firefox and chrome or Internet Explorer. After some more research I got that few glyph may be available on one Browser may not be available on another web browser. It also depend on font family you are using. Not all fonts have all the icons so it will not work for all fonts. If not sure of portability then it is better to use images for these icons. I have tested for check mark on Window platform on Firefox, Internet Explorer and chrome and then on Mac and check mark was working. and I also learnt that using Unicode representation is better then using Wingdings font.

Here is a list of wingdings fonts and its Unicode representation. Decimal value for  ✈  represented as 9992 and Hex ✈ (✈) represented as U+2708. It will help in using those representation on HTML page. Just put those code in HTML page and see if it is working! It may not work. Below are few observations I made during the search and understanding.

Check Mark Symbol:
✓ for in Hex.
I have used style for decorating the check mark - <span style="color:#008A00;font-size:larger">. It is working in IE, FF and Chrome also.

These does not work in Firefox but works in IE and chrome:

<div style="font-family:wingdings">
! " * 7  A M N \
</div>

If you are not using Internet Explorer then you may be seeing small squares below.

! " * 7 A M N \

For snowflakes we can use this code:
<p style="background-color:gray;color:white;font-family: 'Arial Unicode MS';">
Snow flakes: Decimal &#10052; and HEX &#x2744;
</p>

For Envelope:
<div style="background-color:gray;color:white;font-family: 'Arial Unicode MS';">
Envelope Decimal &#9993; and Hex &#x2709;
</div>

For producing the below output, the HTML code is used as follow:
<div style="background-color:gray;color:white; font-size:40px; font-family: 'Arial Unicode MS';">
&#9996; &#9760; &#2384;
</div>

✌ ☠ ॐ

I got many useful links related to wingdings, Unicode representation of those characters and HTML symbols. Here are two of them:
http://www.fileformat.info/info/unicode/char/2713/index.htm
http://www.alanwood.net/demos/wingdings.html

  • # 1 - by Shane McCallum

    Handy post, I often get peoples “designs” for how they want things to look in MS Word format and more often than not they are using Wingdings and what not. This is a nice simple way to give them exactly what they want without creating icons and whatnot. Thx for the post.

Comments are open for an year period. Please, write here on Facebook page.