DEV Community

Cover image for How to add Emoji's in your website, using HTML, CSS or JavaScript
Rémy Beumier
Rémy Beumier

Posted on • Updated on

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

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>
Enter fullscreen mode Exit fullscreen mode

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

<p>&#x1F525</p>
Enter fullscreen mode Exit fullscreen mode

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: "🔥";
}
Enter fullscreen mode Exit fullscreen mode

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

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

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 = "🔥";
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

Collapse
rossinimaximo profile image
Maximo-Rossini

useful and easy-reading post, thankss!

Collapse
idarek profile image
Dariusz Więckiewicz

Got a question that struggling to find answers. How this work with website speed. Using Emoji instead inline SVG for example?