How can you get an idea of the HTML object to display in Chrome?
My site has thumbs up images that I want to display as HTML entities. Decimal and Hexadecimal Codes:
👍
👍
respectively.
In FF, both codes are displayed as thumbs, but in Chrome they are not (nothing is displayed at all).
Here is a render (in white) on a dark background.
Why is this happening?
source to share
In general, for such emulator objects, you cannot rely on the end user's font, including it. This is especially true for Chrome (as of December 2014), which is the last major browser remaining to not render emoji by default.
Your best bet is to use an image here.
A custom font is also a good solution (chat tip for @Vucko).
source to share
font support for THUMBS UP SIGN (U + 1F44D) is very limited, as usual, for any characters recently added to Unicode (during the last few years). A large number of user systems don't have a single font, so the only way to get almost all browsers to render a character is to use a downloadable font (web font) via @font-face
; in practice you would use Quivira or Symbola for this. Since they are fairly large fonts, using an image might be the best option.
What happens when you use a character and do not specify a font at all, or specify a font or list of fonts that does not contain that character is that browsers will use some fallback fonts. They can do it differently, so browsers on the same system do it differently, as they view the font list in a different order. Moreover, browsers have bugs in this regard. They are expected (according to CSS specs) to render a symbol if any of the fonts on the system contain it, but they often cannot. Sometimes this is caused by a faulty font: the font contains information according to which it has a specific character, so the browser uses that font, but in fact the character is missing and some generic character appears. Sometimes we just don't know why it fails.
You can avoid such errors by explicitly specifying the fonts that are known to contain the character. But this is of course ineffective when the user's system does not have a single font.
<style>
.emoji {
font-family: Segoe UI Emoji, Segoe UI Symbol, Quivira, Symbola;
}
</style>
<span class=emoji>👍</span>
source to share