How do you get the thumbs up HTML entity to display properly on Chrome?

Question

My site has thumbs up images that I want to render these as HTML entities. The decimal and hex codes are:

👍
👍

respectively.

In FF, both codes are rendered as a thumbs up but in Chrome neither is (nothing is displayed at all).

Here is the rendering (in white) on a dark background.

Why is this happening?

Answer 1

In general, for emoji entities like this, you can't rely on the end user's font including it. This is especially true of Chrome (as of December 2014), which is the last major remaining browser where rendering emoji doesn't work by default.

You're best off using an image here.

A custom font is also a good solution (hat tip to @Vucko).

Answer 2

The font support to THUMBS UP SIGN (U+1F44D) is very limited, as usual for any characters added to Unicode recently (during the last few years). A large number of users’ system have none of the fonts, so the only way to make almost all browsers render the character is to use a downloadable font (web font) via @font-face; in practice, you would use Quivira or Symbola for this. As they are rather large fonts, using an image may be a better option.

What happens when you use the character and do not specify the font at all, or specify a font or list of fonts not containing that character, is that browsers will use some backup fonts. They may do this in different ways, so that browsers in the same system render it differently, since they scan thru the list of fonts in a different order. Moreover, browsers have bugs in this respect. They are expected (according to CSS specifications) to render the character if any of the fonts in the system contains it, but they often fail to do that. Sometimes this is caused by a faulty font: a font contains information according to which it has a certain character, so the browser uses that font, but in fact the character is missing and some generic symbol appears. Sometimes we just don’t know why it fails.

You can avoid such bugs by explicitly listing fonts that are known to contain the character. But this is of course ineffective when the user’s system has none of the fonts.

<style>
.emoji {
  font-family: Segoe UI Emoji, Segoe UI Symbol, Quivira, Symbola;
}
</style>
<span class=emoji>&#x1F44D;</span>