Tick symbol in HTML/XHTML
HtmlXhtmlHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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.
Solution 3 - Html
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.
Solution 4 - Html
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;
Solution 5 - Html
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.
Solution 6 - Html
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.
Solution 7 - Html
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.
Solution 8 - Html
> 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.
Solution 9 - Html
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.
Solution 10 - Html
.className {
content: '\✓';
}
Using CSS content Property you can show tick with an image or other codesign.
Solution 11 - Html
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> ✓
Solution 12 - Html
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>
Solution 13 - Html
you could use ⊕ or ⊗
Solution 14 - Html
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">