Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tick symbol in HTML/XHTML

Tags:

html

xhtml

People also ask

How do I insert a tick symbol in HTML?

In the web page's HTML source code, add one of the following Unicode HTML entities, depending on the type of check mark you want to insert. ☑ - inserts the " ☑ " symbol. ✓ - adds the " ✓ " symbol. ✔ - inserts the " ✔ " symbol.


I think you're using less-well-supported Unicode values, which don't always have glyphs for all the code points.
Try the following characters:

  • ☐ (0x2610 in Unicode hexadecimal [HTML decimal: ☐]): an empty (unchecked) checkbox
  • ☑ (0x2611 [HTML decimal: ☑]): the checked version of the previous checkbox
  • ✓ (0x2713 [HTML decimal: ✓])
  • ✔ (0x2714 [HTML decimal: ✔])

Edit: There seems to be some confusion about the first symbol here, ☐ / 0x2610. This is an empty (unchecked) checkbox, so if you see a box, that's the way it's supposed to look. It's the counterpart to ☑ / 0x2611, which is the checked version.


First off, you should realize that you don't actually need to use HTML entities – as long as your HTML document's encoding is declared properly as UTF-8, you can simply copy/paste these symbols into your file/server-side script/JavaScript/whatever.

Having said that, here's the exhaustive list of all relevant UTF-8 characters / HTML entities related to this topic:

  • ☐ (hex: ☐ / dec: ☐): ballot box (empty, that's how it's supposed to be)
  • ☑ (hex: ☑ / dec: ☑): ballot box with check
  • ☒ (hex: ☒ / dec: ☒): ballot box with x
  • ✓ (hex: ✓ / dec: ✓): check mark, equivalent to ✓ and ✓ in most browsers
  • ✔ (hex: ✔ / dec: ✔): heavy check mark
  • ✗ (hex: ✗ / dec: ✗): ballot x
  • ✘ (hex: ✘ / dec: ✘): heavy ballot x
  • 🗸 (⚠ hex: 🗸 / dec 🗸): light check mark (poorly supported as of 2017)
  • ✅ (⚠ hex: ✅ / dec: ✅): white heavy check mark (mixed support as of 2017)
  • 🗴 (⚠ hex: 🗴 / dec: 🗴): ballot script X (poorly supported as of 2017)
  • 🗶 (⚠ hex: 🗶 / dec: 🗶): ballot bold script X (poorly supported as of 2017)
  • ⮽ (⚠ hex: ⮽ / dec: ⮽): ballot box with light X (poorly supported as of 2017)
  • 🗵 (⚠ hex: 🗵 / dec: 🗵): ballot box with script X (poorly supported as of 2017)
  • 🗹 (⚠ hex: 🗹 / dec: 🗹): ballot box with bold check (poorly supported as of 2017)
  • 🗷 (⚠ hex: 🗷 / dec: 🗷): ballot box with bold script X (poorly supported as of 2017)

Checking out web fonts for tick symbols? Here's a ready to use sample for the more common ones: A☐B☑C☒D✓E✔F✗G✘H -- just copy/paste this into your webfont provider's sample text box and see which fonts support what tick symbols.


The client machine needs a proper font that has a glyph for this character to display it. But Times New Roman doesn’t. Try Arial Unicode MS or Lucida Grande instead:

<span style="font-family: Arial Unicode MS, Lucida Grande">
    &#10003; &#10004;
</span>

This works for me on Windows XP in IE 5.5, IE 6.0, FF 3.0.6.


I normally use the fontawesome font(http://fontawesome.io/icon/check/), you can use it in html files:

 <i class="fa fa-check"></i>

or in css:

content: "\f00c";
font-family: FontAwesome;