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.
Answer
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.