8

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 problem which doesn't have a glyph for that? Any ideas?
Details: Html page, i use firefox 16.0.1, Windows 7.. Page like on this post i dont see this glyph either
Thanks

el vis
  • 1,302
  • 2
  • 16
  • 32
  • 1
    Well, you've answered your question within the question itself. ) – raina77ow Oct 23 '12 at 14:32
  • It completely depends on your environment. Please supply vast quantities of additional detail. – SLaks Oct 23 '12 at 14:32
  • @raina77ow ok, thanks. Do you know some fonts that are able to show that character on website. Is it only html to fix - i mean add font-family:SOME_UNICODE_FONT and it will be done. It depends on web browser fonts or system fonts? – el vis Oct 23 '12 at 14:38
  • Please add some context to your question. Is this a HTML page? Add the HTML tag. Is this a Java console application? Add the Java tag. Solution depends on the context. But yes, an empty box indicates the lack of a glyph associated with the codepoint in the font currently used. It would help if you tell which character it is and which font you're using. – BalusC Oct 23 '12 at 14:43
  • @Sidath, I added details to post. – el vis Oct 23 '12 at 14:46

3 Answers3

8

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thanks a lot. That explains everything. So when i want to use 'strange' character i should always think about what fonts are installed on end-user web browser right? – el vis Oct 23 '12 at 15:00
  • 1
    You're welcome. That's correct. You can however also supply your own font along with the webapp by CSS `@font-face`. – BalusC Oct 23 '12 at 15:03
  • Also relevant beyond just the fonts a web page is designed to use is the browser's and OS's font fallback behavior. – bames53 Oct 23 '12 at 18:54
4

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thank you for explanation, i tried it with font-face, then i installed it and used it without font-face, and all worked as you said ;) – el vis Oct 23 '12 at 20:10
1

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.

martinstoeckli
  • 23,430
  • 6
  • 56
  • 87
  • martin, can you see this glyph in my post ? or you see this square with codes? My page contains charset utf-8 declaration. – el vis Oct 23 '12 at 14:50
  • @pawlakppp - I see the square, what kind of symbol should it be? – martinstoeckli Oct 23 '12 at 14:51
  • it should be hand pointing right. So you see SO is definitely utf-8 compatible and we don't see this symbol – el vis Oct 23 '12 at 14:53
  • You mean something like this ☛ or this ☞ ? – martinstoeckli Oct 23 '12 at 14:57
  • Yeah smth like this, but it's not that i'm trying to find something similiar. I just would like to know how this encoding and fonts work. – el vis Oct 23 '12 at 15:01
  • @pawlakppp - Ok i understand, for a safe collection of characters and symbols, you can have a look at this [font map](http://www.martinstoeckli.ch/fontmap/fontmap.html), it does not contain all possible characters, but it helped me often to find a good symbol. – martinstoeckli Oct 23 '12 at 15:06