Displaying emojis in old browsers

Question

Suppose I have some special characters, such as , in my website. Unfortunately, though icons like these can be super useful, they do not work in all browsers.

For those browsers that they do not show up in, what are my options? Is it possible to replace them using JavaScript to something more friendly, such as a + sign? Can I somehow hack the website to load additional character sets? I could obviously use images, but for now, I'd rather avoid that if I can--I want it to match the text color that it is surrounding, and that text may be subject to change.

Thanks for your help!

Answer 1

Special characters like “” U+1F44D THUMBS UP SIGN mostly don’t work. This does not primarily depend on on browsers but on fonts: very few fonts contain such characters, and you cannot expect Joe Q. Public’s computer to contain any of them. In practice, e.g. U+1F44D can be found in Segoe UI Symbol (which may be pre-installed in newest Windows systems) and in Symbola (a free font that needs to be downloaded by the user). For generalities, see my Guide to using special characters in HTML.

It is of course possible to replace special characters by other characters using JavaScript, but there is no simple way to decide when you need to do that. Doing it always would make the use of special characters pointless. Checking whether a system has a font that contains the character(s) is tricky. – Note that working with a character like U+1F44D in JavaScript requires care, since it’s a non-BMP character and corresponds to two consecutive components of a JavaScript string, high and low surrogate code unit.

Using an image is a natural option, though it requires care (the image should be large enough and scaled down to match text font size). And you would need different images for different text colors, because CSS lacks practical tools for coloring images, I’m afraid.

You could use a downloadable font (web font) via @font-face. In the case of U+1F44D, Symbola would appear to be the only option. It’s fairly large, but perhaps not excessively large these days.

Answer 2

You should include a webfont that supports the emoji characters you want to use.

To include an icon font in your CSS, use the following code :

@font-face {
    font-family: 'myfont';
    src:url('fonts/myfont.eot?-td2xif');
    src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
        url('fonts/myfont.woff?-td2xif') format('woff'),
        url('fonts/myfont.ttf?-td2xif') format('truetype'),
        url('fonts/myfont.svg?-td2xif#myfont') format('svg');
    // Different URLs are required for optimal browser support
    // Make sure to :
    // 1) replace the URLs with your font's URLs
    // 2) replace `#myfont` with the name of your font
    font-weight: normal; // To avoid the font inherits boldness
    font-style: normal; // To avoid font inherits obliqueness or italic
}

.emoji {
    font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
    speak: none; // To avoid screen readers trying to read the content
    font-style: normal; // To avoid font inherits obliqueness or italic
    font-weight: normal; // To avoid the font inherits boldness
    font-variant: normal; // To avoid the font inherits small-caps
    text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
    line-height: 1; // To avoid the font inherits an undesired line-height
    -webkit-font-smoothing: antialiased; // For improved readability on Webkit
    -moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}

You can then include your symbol like this:

<span class="icon">&#128077;</span>

If you don't know a webfont that supports your character, you can easily create one yourself using the Icomoon App. See also my open source Emoji icon font for an example of an Icon font with support for Emoji characters, which I created with the Icomoon App.

---

More info:

• Create webfont with Unicode Supplementary Multilingual Plane symbols