Tick symbol in HTML/XHTML

Question

asked Sep 9, 2019 in Web Technology by Tech4ever (20.3k points)

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 an XP box, ideally, we need it to 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 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 it if someone could check under FF on Windows. I am pretty sure it won't work on a non-Windows box.

1 Answer

Soni Kumari · Answer 1 · 2019-09-09T14:39:24+0000

I believe you are using less-well-supported Unicode values, which don't always have glyphs for all the code points.

Try using 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: ✔])

Note: 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 then checked version.

Tick symbol in HTML/XHTML

1 Answer

Related questions

Browse Categories