I am using the Instagram API and below is an example of two characters I get back from IG that represent a user's name.
In the HTML of my web page they are displaying as question marks, but if you copy and paste them into any text editor they display as a heart and a flower.
How can I get these and other symbols to display correctly in the HTML?
The characters are U+1F49B YELLOW HEART and U+1F33B SUNFLOWER. They are relatively new as coded characters (though somewhat older as emoji symbols implemented using other techniques), and few fonts contain them: Segoe UI Symbol, Segoe UI Emoji, Quivira, Symbola, and maybe some other, very new or specialized fonts. The Segoe UI fonts are available in new versions of Windows, possibly depending on the installation of updates (Microsoft nowadays delivers some fonts and extensions to fonts via Windows update mechanisms). The other two are free fonts that users may download and install, but they are probably not pre-installed in any computer.
Thus, if the user’s system lacks those fonts, the characters do not appear; instead, some indicator of an unrepresentable character is shown.
There is an additional problem. Although browsers are expected to scan through all the installed fonts to find a glyph for a character, they often fail to do this properly, especially for more or less exotic characters. Testing on Win 7 without any font settings in the test document, I observed that these characters are displayed by IE and Firefox, but not by Chrome. This issue can be fixed by specifying a list of fonts explicitly:
.emoji {
font-family: Segoe UI Emoji, Segoe UI Symbol,
Symbola, Quivira;
}<span class=emoji></span>To cover user systems that lack these fonts, you would need to use a downloadable font via @font-face, in practice using Symbola or Quivira. They are rather large fonts, so using images may be a more viable option—especially because then you can use color images. (In principle, you can use Variation Selector control characters to ask rendering software to use emoji-style color glyphs for the characters, but the fonts don’t seem to contain such glyphs, and besides browsers might be unable to use them, i.e. might lack support to Variation Selectors.)
Since you cant get them to show correctly since its browser specific, you can download the Chrome plugin, Emoji Plugin
Edit: Another solution would be to get the unicode of the emoji that comes in, and then display an image instead. This would require you do download the emojis as images.
Sadly, there's nothing you can do. You have to wait for all browsers to adopt these HTML5 entities.
IE 11 is currently the only browser that displays all HTML5 entities. I viewed this page in IE 11 and they show up. In Chrome, for example, they don't show.
