harrewijnen.net

Ramblings from a guy writing code and other stuff

Emojis in HTML

With the ever increasing amount of stuff being added to unicode fonts, finding something that fits the context you need is becoming quite easy. Take for example this envelope icon:

This envelope is available in the unicode characters set. Another example, this mobile phone:

📱

Wait?! Where did that icon come from, it doesn't look anything like the character from the unicode website!

Emojis Quick note: if this all seems perfectly normal, pictured above is what Chrome will display.

Emojis are descibed as followed:

Emoji are pictographs (pictorial symbols) that are typically presented in a colorful form and used inline in text. They represent things such as faces, weather, vehicles and buildings, food and drink, animals and plants, or icons that represent emotions, feelings, or activities.

Source: unicode.org

So that styling is perfectly normal. In fact, these emojis are the same emojis you use on your phone in things like WhatsApp. But what if...

What if I'm using these emojis on a webpage like here and I really don't want any predefined styles for my icons.

Lucky for us, the unicode people thought of this and introduced a special override to use when you want to render the emoji in its most basic form (a text character). For this there is the text presentation selector. All the boring bits can be found here, but instead, let's look at what it boils down to.

To tell the renderer (in this case, the browser) to render the text representation of the emoji, we need a special suffix: U+FE0E, or the HTML equivalent &#xFE0E. This is a suffix, so it needs to be placed behind the original emoji code, without spaces in between. Let's use this on our mobile phone emoji:

Here's the orignal: 📱 and here is the text representation: 📱︎

As desribed above, a suffix is required behind the existing emoji signature. We started with just the mobile phone: 📱 and to get the text representation, we add the suffix: 📱︎.

Depending on the font you are using you may not see any emojis at all, but on this website (in Chrome) it should look something like this:

text emoji

So now that we know all this, why is this usefull? One of the major drawbacks of the colorful emojis is that they can't be restyled using CSS. They can be resized like other text, but they won't respond to something like color: red; because there is nothing that can be styled. Another thing is that they might display different things on different devices which creates inconsistency. The predefined icon can also clash with a color scheme or other design you had in mind.

Using the unicode emojis is very easy and doesn't require much except for a font that supports them. If you do end up with emojis on the pages you make, you now know how to escape them and apply some minor styling of your own. Alternatives for the hard-to-solve cases or icons not included in unicode are using an icon-font such as Font Awesome or use actual images for the icons.