Tick symbol in HTML/XHTML

283
votes

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.

14
htmlxhtml
What is a tick symbol supposed to look like? – John Feminella
have you seen this: html-faq.com/htmlbasics/?specialcharacters – Sam Hasler
Sam, please take a look at the question. – Vlad Gudim
@Totophil, I know it talks about the same entities, but it also suggests having the server send an actual HTTP header Content-Type: text/html;charset=utf-8 as well as the problem that the font in use might not contain glyphs for the characters used. – Sam Hasler
Here are a couple: amp-what.com/#q=check%20mark &#x2713 &#x2714 – ndp

14 Answers

461
votes

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: &#9744;]): an empty (unchecked) checkbox
  • ☑ (0x2611 [HTML decimal: &#9745;]): the checked version of the previous checkbox
  • ✓ (0x2713 [HTML decimal: &#10003;])
  • ✔ (0x2714 [HTML decimal: &#10004;])

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.

278
votes

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: &#x2610; / dec: &#9744;): ballot box (empty, that's how it's supposed to be)
  • ☑ (hex: &#x2611; / dec: &#9745;): ballot box with check
  • ☒ (hex: &#x2612; / dec: &#9746;): ballot box with x
  • ✓ (hex: &#x2713; / dec: &#10003;): check mark, equivalent to &checkmark; and &check; in most browsers
  • ✔ (hex: &#x2714; / dec: &#10004;): heavy check mark
  • ✗ (hex: &#x2717; / dec: &#10007;): ballot x
  • ✘ (hex: &#x2718; / dec: &#10008;): heavy ballot x
  • 🗸 (⚠ hex: &#x1F5F8; / dec &#128504;): light check mark (poorly supported as of 2017)
  • ✅ (⚠ hex: &#x2705; / dec: &#9989;): white heavy check mark (mixed support as of 2017)
  • 🗴 (⚠ hex: &#x1F5F4; / dec: &#128500;): ballot script X (poorly supported as of 2017)
  • 🗶 (⚠ hex: &#x1F5F6; / dec: &#128502;): ballot bold script X (poorly supported as of 2017)
  • ⮽ (⚠ hex: &#x2BBD; / dec: &#11197;): ballot box with light X (poorly supported as of 2017)
  • 🗵 (⚠ hex: &#x1F5F5; / dec: &#128501;): ballot box with script X (poorly supported as of 2017)
  • 🗹 (⚠ hex: &#x1F5F9; / dec: &#128505;): ballot box with bold check (poorly supported as of 2017)
  • 🗷 (⚠ hex: &#x1F5F7; / dec: &#128503;): 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.

17
votes

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.

14
votes

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;
12
votes

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.

11
votes

I run into the same problem and none of the suggestions worked (Firefox on Windows XP).

So I found a possible workaround using image data to display a little checkmark:

span:before {
    content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}

Of course you can create your own checkmark image and use a converter to add it as data:image/gif. Hope this helps.

9
votes

Coming very late to the party, I found that &check; (&check;) worked in Opera. I haven't tested it on any other browsers, but it might be useful for some people.

8
votes

although sets browser encoding to UTF-8

(If you're using numeric character references of course it doesn't matter what encoding is being used, browsers will get the correct Unicode codepoint directly from the number.)

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

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

Fails for me in Firefox 3, Opera, and Safari. Curiously, works in the other Webkit browser, Chrome. Also fails on Linux (obviously, as Wingdings isn't installed there; it is installed on Macs, but that doesn't help you if Safari's not having it).

Also it's a pretty nasty hack — that character is to all intents and purposes “ü” and will appear that way to things like search engines, or if the text is copy-and-pasted. Proper Unicode code points are the way to go unless you really have no alternative.

The problem is that no font bundled with Windows supplies U+2713 CHECK MARK (‘✓’). The only one that you're at all likely to find on a Windows machine is “Arial Unicode MS”, which is not really to be relied upon. So in the end I think you'll have to either:

  • use a different character which is better supported (eg. ‘●’ — bullet, as used by SO), or
  • use an image, with ‘✓’ as the alt text.
5
votes

Would √ (square root symbol, &#8730;) suffice?

Alternatively, ensure you're setting the Content-Type: header before sending data to the browser. Merely specifying the <meta> content-type tag may not be enough to encourage browsers to use the correct character set.

5
votes
.className {
   content: '\&#x2713';
}

Using CSS content Property you can show tick with an image or other codesign.

4
votes

Solution using Windows' default font Wingdings; which is not unicode based and doesn't work in Linux (unless it is installed):

Crossed Checkbox
<div style="font-family: Wingdings;">û</div> ☒

Checked Checkbox
<div style="font-family: Wingdings;">ü</div> ☑

Cross
<div style="font-family: Wingdings;">ý</div> ✗

Check
<div style="font-family: Wingdings;">þ</div> ✓
1
votes

Using WebDing or WingDing fonts is the only way to achieve the goal of this topic: it has to work starting with IE 6.0.2900. Therefore I would post some here, as well as some correction to posted above:

Cross
<span style="font-family: Wingdings;">&#251;</span><br>
    
Check
<span style="font-family: Wingdings;">&#252;</span><br>

Crossed Checkbox
<span style="font-family: Wingdings;">&#253;</span><br>
    
Checked Checkbox
<span style="font-family: Wingdings;">&#254;</span><br>
    
Empty Checkbox
<span style="font-family: Wingdings;">&#168;</span><br>
    
Thick Check
<span style="font-family: Webdings;">&#97;</span><br>
    
Friendly asked in comments
<div style="display: inline; font-family: Wingdings; font-size: 15px; background-color: lightblue; border: 2px solid black; padding: 1px 4px 0 2px;">&#252;</div>

Reference here: wingdings webdings

0
votes

you could use ⊕ or ⊗

0
votes

You can add a little white one with a Base64 Encoded GIF (online generator here):

url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==")

With Chrome, for instance, I use it to style the checkbox control:

INPUT[type=checkbox]:focus
{
outline:1px solid rgba(0,0,0,0.2);
}

INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
-webkit-appearance: button;
width: 17px;
height: 17px;
margin-top: 1px;
cursor:pointer;
}

INPUT[type=checkbox]:checked
{
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

If you just wanted it in an IMG tag, you would do the checkmark/tickmark as:

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">