How do i use emojis in css?

Rémy Beumier

Posted on Feb 7, 2020 • Updated on Mar 22, 2021

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.

🔥

  

Enter fullscreen mode Exit fullscreen mode

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

&#x1F525

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.

Smiley Emojis For Web.

If you want any of these emojis displayed in HTML, you can use the decimal [dec] or hexadecimal [hex] reference found in the table below.

Example

😜

I will display 😜

I will display 😜

Will display as:

😜

I will display 😜

I will display 😜

Try it Yourself

How do I get Emojis in HTML and CSS?

What is the code for Emojis in HTML?

Can I use Emojis in my design?