Tick symbol in HTML/XHTML

We need to display a tick symbol (✓ or ✔) within an internal web app and would ideally like to avoid using an image.

Has to work starting with IE 6.0.2900 on a XP box, ideally we need it be cross-browser (IE + recent versions of FF).

The following displays boxes although sets browser encoding to UTF-8 (META works nicely and not the issue). The default font is Times New Roman (might be an issue, but trying Lucida Sans Unicode doesn't help and I don't have neither Arial Unicode MS, nor Lucida Grande installed).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
 &#10003; &#10004;
</body>
</html>

Any help appreciated.

The following works under IE 6.0 and IE 7:

<html>
<head>

</head>
<body>
 <span style="font-family: wingdings; font-size: 200%;">&#252;</span>
</body>
</html>

I would appreciate if someone could check under FF on Windows. I am pretty sure it won't work on a non Windows box.

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 &checkmark; and &check; 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;

Why don't you use the HTML input checkbox element in read only mode

<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />

I assume this will work on all browsers.

Tick symbol in HTML/XHTML

Related

Recent Posts