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.
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.
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.
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.
.className {
content: '\✓';
}
Using CSS content Property you can show tick with an image or other codesign.
you could use ⊕ or ⊗
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_x000D_
<span style="font-family: Wingdings;">û</span><br>_x000D_
_x000D_
Check_x000D_
<span style="font-family: Wingdings;">ü</span><br>_x000D_
_x000D_
Crossed Checkbox_x000D_
<span style="font-family: Wingdings;">ý</span><br>_x000D_
_x000D_
Checked Checkbox_x000D_
<span style="font-family: Wingdings;">þ</span><br>_x000D_
_x000D_
Empty Checkbox_x000D_
<span style="font-family: Wingdings;">¨</span><br>_x000D_
_x000D_
Thick Check_x000D_
<span style="font-family: Webdings;">a</span>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;
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:
☐]): an empty (unchecked) checkbox☑]): the checked version of the previous checkbox✓])✔])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.
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.
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">
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 using Wingdings which is not unicode based and doesn't work in Linux without Wingdings 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> ?
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:
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:
☐ / dec: ☐): ballot box (empty, that's how it's supposed to be)☑ / dec: ☑): ballot box with check☒ / dec: ☒): ballot box with x✓ / dec: ✓): check mark, equivalent to ✓ and ✓ in most browsers✔ / dec: ✔): heavy check mark✗ / dec: ✗): ballot x✘ / dec: ✘): heavy ballot x🗸 / dec 🗸): light check mark (poorly supported as of 2017)✅ / dec: ✅): white heavy check mark (mixed support as of 2017)🗴 / dec: 🗴): ballot script X (poorly supported as of 2017)🗶 / dec: 🗶): ballot bold script X (poorly supported as of 2017)⮽ / dec: ⮽): ballot box with light X (poorly supported as of 2017)🗵 / dec: 🗵): ballot box with script X (poorly supported as of 2017)🗹 / dec: 🗹): ballot box with bold check (poorly supported as of 2017)🗷 / 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.
Source: Stackoverflow.com