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> ✓ ✔ </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%;">ü</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.
asked Mar 18, 2009 at 12:25
8
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.
DS.
21.2k6 gold badges46 silver badges53 bronze badges
answered Mar 18, 2009 at 12:30
John FeminellaJohn Feminella
297k45 gold badges334 silver badges354 bronze badges
13
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.
answered Aug 18, 2013 at 0:49
Bogdan StăncescuBogdan Stăncescu
5,2402 gold badges23 silver badges24 bronze badges
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"> ✓ ✔ </span>This works for me on Windows XP in IE 5.5, IE 6.0, FF 3.0.6.
answered Mar 18, 2009 at 12:30
GumboGumbo
628k106 gold badges767 silver badges838 bronze badges
4
I normally use the fontawesome font(//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;answered Jun 12, 2014 at 10:00
stefanstefan
2,6272 gold badges22 silver badges30 bronze badges
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, 2009 at 14:33
DrejcDrejc
14k16 gold badges71 silver badges103 bronze badges
1
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.
answered Sep 28, 2013 at 19:36
AvatarAvatar
13.4k8 gold badges112 silver badges183 bronze badges
Coming very late to the party, I found that ✓ (✓) worked in Opera. I haven't tested it on any other browsers, but it might be useful for some people.
answered May 23, 2013 at 14:53
rossumrossum
15k1 gold badge22 silver badges36 bronze badges
1
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%;">ü</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.
Vlad Gudim
23.2k16 gold badges69 silver badges92 bronze badges
answered Mar 18, 2009 at 14:16
bobincebobince
519k102 gold badges646 silver badges825 bronze badges
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.
answered Mar 18, 2009 at 13:31
Ian KempIan Kemp
27.1k18 gold badges107 silver badges129 bronze badges
4
.className { content: '\✓'; }
Using CSS content Property you can show tick with an image or other codesign.
answered Sep 25, 2013 at 9:29
s-sharmas-sharma
1,9271 gold badge15 silver badges20 bronze badges
3
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> ✓answered Jan 28, 2015 at 10:46
NishantNishant
19.4k17 gold badges67 silver badges92 bronze badges
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;">û</span><br> Check <span style="font-family: Wingdings;">ü</span><br> Crossed Checkbox <span style="font-family: Wingdings;">ý</span><br> Checked Checkbox <span style="font-family: Wingdings;">þ</span><br> Empty Checkbox <span style="font-family: Wingdings;">¨</span><br> Thick Check <span style="font-family: Webdings;">a</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;">ü</div>
Reference here: wingdings webdings
answered May 14, 2020 at 23:28
2
you could use ⊕ or ⊗
answered Mar 18, 2009 at 12:31
Gabriel SolomonGabriel Solomon
28k15 gold badges56 silver badges78 bronze badges
1
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">answered Jun 2, 2019 at 1:48
VolomikeVolomike
22.9k20 gold badges110 silver badges201 bronze badges