UTF-8 special characters don't show up

Question

I\'m trying to figure out why characters like this : 👉 show up like empty boxes. They are unicode characters though and charset is utf-8.

Can it be a font

Answer 1

The character which you've there is the Unicode Character 'WHITE RIGHT POINTING BACKHAND INDEX' (U+1F449). On that page, you can find a list of known fonts supporting the character behind the link Fonts that support U+1F449.

Font
LastResort
Segoe UI Emoji
Segoe UI Symbol
Symbola

Neither of those fonts is been used here on stackoverflow.com, so you'll also see an empty box.

If this occurs on your own website, and you'd like to fix it, then you'd need to supply a supporting font along with the webapp by CSS @font-face, or in this particular case perhaps better, look for a CSS based icon library such as Font Awesome. The <i class="fa fa-hand-o-right"> comes very close with this character.

Answer 2

The character U+1F449 was added to Unicode in version 6 in 2010, and it generally takes about ten years from the adoption of a character into Unicode before it is widely supported in fonts.

The few fonts that contain it now include Symbola and Segoe UI Symbol. If you have either of them installed, you’ll probably see it; otherwise not. Segoe UI Symbol is shipped with Windows 8 and apparently with (at least some variants of) Windows 7, though the Windows 7 version may be limited – an update is available from Microsoft. Symbola is a free font, so you could in principle use it as a downloadable font (via @font-face), but its file size is rather large.

Web browsers are supposed to use fallback fonts, if the fonts specified for an element do not contain a glyph for some character in the content. Firefox generally implements this will, IE does not, especially in older versions, so if you use the character on a web page, it is best to wrap in an element of its own (usually span is used for the purpose) and set the following on it in CSS:

font-family: Segoe UI Symbol, Symbola;

But this will as such (without @font-face) work only for people using computers that contain one of the fonts.

Answer 3

Missing font characters will usually be substituted with other fonts, and UTF-8 should be able to display all unicode characters. I suspect that the encoding of your file (how it is saved by your editor), does not match the declaration in the meta tags of your HTML page.

You can check your page with this W3-checker, it can possibly give you hints about the problem of your page.

EDIT:

You are right, it's not an encoding problem, the number of the character has such a high number, that the "normal" fonts do not support it. Maybe you can use one of those ☛ ☞, otherwise you would have to use a web font, and fonts with full unicode support can be quite large.