Tick symbol in HTML/XHTML

Question

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.

have you seen this: http://www.html-faq.com/htmlbasics/?specialcharacters — Sam Hasler, Mar 18 '09 at 12:29
@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, Mar 18 '09 at 12:38
Here are a couple: http://amp-what.com/#q=check%20mark ✓ ✔ — ndp, Nov 02 '12 at 03:05
The Wingdings solution worked fine in Chrome and also more importantly was understood by our html to pdf generator — zzapper, Apr 10 '17 at 11:32
You have to search for it by the American name for it, a "check". — ClearCrescendo, Dec 05 '19 at 17:51

score 473 · Answer 1 · edited Mar 24 '14 at 20:15

473

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.

edited Mar 24 '14 at 20:15

DS.

22,632
6
47
54

answered Mar 18 '09 at 12:30

John Feminella

303,634
46
339
357

1

Corporate setup: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300 – Vlad Gudim Mar 18 '09 at 12:55
The first is a box to me, the rest work fine. Although, I'd use an image instead, just to be sure. – mbillard Mar 18 '09 at 13:42
8

Just to be clear, the first image is supposed to be a box -- it's an empty checkbox! – John Feminella Mar 18 '09 at 13:46
John, they all look like the same looking box to me, the kind you get displayed then the font doesn't contain a certain glyth. – Vlad Gudim Mar 18 '09 at 13:50
1

@Totophil: Ah, okay. I'm using Ubuntu, and the default sans font that I configured in FF has these glyphs. In Windows, just use the character map to look up these glyphs and see if your desired font has them. If not, you'll need to pick a different one. – John Feminella Mar 18 '09 at 13:53
@John, thanks! Well yes, WingDings got the tick glyph, but really this is not much better solution than using a specific font under Linux. – Vlad Gudim Mar 18 '09 at 13:56
They all look like boxes for me on IE6. – Bart S. Mar 18 '09 at 14:21
None of these work for me in IE7 on XP - they all display as boxes. – Rich Aug 04 '10 at 07:07
just switch the font to "MS Gothic" :) – Andy Li Aug 13 '10 at 08:47
5

Empty box decimal code: 0x2610 --> 9744. so HTML code will look like `☐` Similarly for checked box: 0x2611 --> 9745 & HTML code `☑` – Vikas Aug 23 '11 at 06:33
@AndyLi doesn't work for me (XP, IE6) but with the font-family:"Arial Unicode MS", it works! This font is only available on workstations with Microsoft Office but that fit my case. – Damien Feb 17 '12 at 11:16
For anyone coming here and would like the 'cross' alternative to the 3rd tick: `✗` – Lee Jarvis Jul 26 '13 at 11:00
@LeeJarvis Just prepend `` to the hex representation, sans preceeding `0`. – wizzwizz4 May 18 '17 at 18:42

Bogdan Stăncescu · Answer 2 · 2017-06-14T12:09:00.770

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.

Gumbo · Answer 3 · 2009-03-18T14:28:07.467

17

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.

edited Mar 18 '09 at 14:28

answered Mar 18 '09 at 12:30

Gumbo

643,351
109
780
844

Haven't got either font, only Lucida Sans Unicode that remotely looks like unicode font but it doesn't have the ticks. – Vlad Gudim Mar 18 '09 at 12:44
Then list some fonts that have a glyph for this character: `font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande`. – Gumbo Mar 18 '09 at 13:12
Gumbo, doesn't work. Besides I don't have Arial Unicode MS and Lucida Grande installed. – Vlad Gudim Mar 18 '09 at 13:49
It's about as close as you're going to get, but unfortunately Lucida Sans Unicode doesn't supply U+2713/2714. – bobince Mar 18 '09 at 14:18

stefan · Answer 4 · 2016-04-29T14:56:31.670

14

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;

edited Apr 29 '16 at 14:56

answered Jun 12 '14 at 10:00

stefan

2,685
2
24
31

score 13 · Answer 5 · answered Mar 18 '09 at 14:33

13

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.

answered Mar 18 '09 at 14:33

Drejc

14,196
16
71
106

7

We don't need a control, just an indication that a certain option is available within a matrix. Using a disabled control would be wrong in this case. – Vlad Gudim Mar 18 '09 at 14:36

score 11 · Answer 6 · edited May 23 '13 at 14:59

11

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.

edited May 23 '13 at 14:59

James Donnelly

126,410
34
208
218

answered May 23 '13 at 14:53

rossum

15,344
1
24
38

5

Worth noting that `&check;` (and `&checkmark;`) both evaluate to `✓`, which is what the top answer uses. It's a HTML5 [character entity](http://dev.w3.org/html5/html-author/charref) and wouldn't work in IE6. – James Donnelly May 23 '13 at 15:03

score 10 · Answer 7 · edited May 23 '17 at 12:10

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.

score 8 · Answer 8 · edited Mar 18 '09 at 14:34

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.

Ian Kemp · Answer 9 · 2009-03-18T13:38:43.623

6

Would √ (square root symbol, √) 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.

edited Mar 18 '09 at 13:38

answered Mar 18 '09 at 13:31

Ian Kemp

28,293
19
112
138

Thanks! Square root works, but looks a bit like errr... square root? But I guess in the absense of alternative that would probably be as close as it gets. – Vlad Gudim Mar 18 '09 at 13:42
1

Btw, specifying the meta tag sets UTF-8 nicely on mine IE, so in this case that's not the issue. – Vlad Gudim Mar 18 '09 at 13:43
1

A square root is a square root and a checkmark tick is a checkmark tick. Feels to me like putting a toilet pictogram onto a changing room door. – Volker E. Sep 06 '14 at 23:11
1

@VolkerE. But that'd be hilarious! – Dave Newton Jun 10 '15 at 21:29

s-sharma · Answer 10 · 2017-12-05T03:23:38.357

5

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

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

edited Dec 05 '17 at 03:23

answered Sep 25 '13 at 09:29

s-sharma

1,967
1
15
20

Not sure: http://www.w3schools.com/cssref/pr_gen_content.asp shows comapatibily with firefox – s-sharma Sep 30 '13 at 12:12
http://todomvc.com/labs/architecture-examples/react/ check if its working or not as they are using content for tick mark. – s-sharma Sep 30 '13 at 12:13
4

If you want to use utf-8 codes in css content, this way it's possible: `.class{ content: "\2713"; }` – Morteza Sep 08 '14 at 06:28

Nishant · Answer 11 · 2021-03-28T08:07:46.207

5

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> ✓

edited Mar 28 '21 at 08:07

answered Jan 28 '15 at 10:46

Nishant

20,354
18
69
101

Dmitry Babich · Answer 12 · 2021-03-11T08:56:05.063

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

Hello Dmitry! Is it possible to modify the "Checked Checkbox" so that the box is white and the checkmark ist black, i.e. as it is above, although when we have a blue backround? — Mary Star, Mar 08 '21 at 19:38
Sure, use div tag instead and add border (see last example). If you want then to make it empty, set color to transparent. — Dmitry Babich, Mar 11 '21 at 08:57

Volomike · Answer 13 · 2019-06-02T01:53:43.437

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">

score 0 · Answer 14 · answered Mar 18 '09 at 12:31

0

you could use ⊕ or ⊗

answered Mar 18 '09 at 12:31

Gabriel Solomon

29,065
15
57
79

1

Those aren't tick signs, they're circled plus/minus. – GKFX Jun 04 '17 at 14:56

Tick symbol in HTML/XHTML

14 Answers14

Linked

Related