How to add Emoji's in your website, using HTML, CSS or JavaScript

#emoji #webdev #html #tutorial

Emoji's first appeared in 1997 on Japanese mobile phones. They are the descendants of the Emoticons; which are those basic text-based imitation of emotions ;-) – Yes, this is an actual example.

Emoji's grew in popularity years after years by being included in more and more computer, mobile devices, applications, games etc. They are so popular nowadays that they account for a part of the popular culture.

We are using those communication helpers, especially in the younger generations. But how do they work? To stay light, let's say that Emoji's are characters; very much like letters, punctuation marks or symbols.

👽 📞 🏠

Can you find this movie?

How did I integrate those Emoji's into my article? How could I do it anywhere on the web?

We will see different techniques available in HTML, CSS and JavaScript. They rely on two methods; copy-pasting and codepoint.
First find your Emoji, then follow the steps in the language you want.

HTML

The most straightforward way. You can paste the previously chosen Emoji.

<p>🔥</p>

Your other option is to use the codepoint of the Emoji and replacing U+ with &#x.

<p>&#x1F525</p>

CSS

In CSS you need to use the ::before or ::after pseudo-element coupled with the content property where you paste the Emoji as the value.

/* You need an HTML element with the class 'element' */
.element::before {
  content: "🔥";
}

The same way, you can use codepoint replacing U+ with \0.

/* You need an HTML element with the class 'element' */
.element::before {
  content: "\01F525";
}

JavaScript

In JavaScript you need to specify the innerHTML by pasting the Emoji.

/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = "🔥";

Similarly, you can use the String method fromCodePoint mixed with the codepoint value where you replace U+ with 0x.

/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = String.fromCodePoint(0x1F525);

Live example on Codepen

Isn't an example worth a million words? 😄

All major Browsers support the Emoji's so there is no excuse.
Try it yourself and use Emoji's all over the web!

Keep playing to learn! 🔥

If you find value in what I offer don't hesitate and buy me a coffee 😇

The movie described with Emoji's is E.T.

Note: There are plenty of options to have Emoji's integrated that I am not covering in this article. Icon fonts or SVG's are examples, it's up to you to decide what you will use.