Using Emojis in HTML, CSS, and JavaScript

Situatie

From its humble beginnings in 1999, Emojis are all the rage these days. It’s no longer something that only people half our age use to communicate. You and I use them all the time, and almost every chat or messaging-related app under the sun provides great support for it:

Solutie

Pasi de urmat

To use emojis in HTML, the first thing we need to do is set the document’s character encoding to UTF-8. This ensures our emojis display consistently across the variety of browsers and devices your users may be running. Doing this is simple. Inside your head tag, be sure to specify the following meta tag:

<meta charset="UTF-8">

Once you’ve done this, now comes the fun part of actually getting an emoji to display. You have two ways of being able to do this, each with a varying degree of funness. One way is by using the emoji directly in your HTML. The other way is by specifying the emoji via its primitive numerical representation. We’ll look at both of these cases.

The easiest way to display an emoji involves simply copying and pasting. You just need an app or web site that allows you to copy emojis in their native, character form. One great place for doing that is Emojipedia. You can use Emojipedia to search or browse for whatever emoji you are looking for.

Because emojis are treated as text-based content, you can paste them almost anywhere in your document where text is supported. Now, if this is your first time seeing emojis randomly appearing inside your text-based code or your code editor, it will look a bit strange:

Emoji in VS Code

Before we wrap our look at emojis in HTML, let’s talk about accessibility. Emojis are ultimately visual artifacts, but they are represented as text under the covers using elements like p and span that are semantically ambiguous in this case. Screen readers and related tools may not interpret what the emoji is trying to signify properly, but the solution is simple. To use emojis in an accessibility (a11y as the cool kids call it!) friendly way, set the role and aria-label attributes on the element that you are using to reprsent your emoji:

<p role="img" aria-label="hamburger">?</p>

With this change, you still get to use emojis in HTML and be accessibile at the same time.

You can totally use emojis in CSS. The same tricks we saw for emojis in HTML will work with only some slight modifications. You can specify the emoji directly:

h1::before  {
  content: "?";
}

You can also specify the emoji by setting the codepoint:

h1::before  {
  content: "\01F354";
}

How you specify the codepoint is a bit different than what we saw for HTML. All you have to do is remove the U+ from the unicode endpoint and add the \0 (slash zero) characters just before it.

The last thing we will look at is how to use emojis in JavaScript. The approach of using it directly will work here as well. Just make sure to treat the emoji as text:

document.body.innerText = "?";

To use an emoji via its codepoint value instead, we have to pass them through the String.fromCodePoint method. This method takes a codepoint value as its argument:

document.body.innerText = String.fromCodePoint(0x1F354);

What gets returned is the character at that codepoint location. How you specify the codepoint is different than both HTML and CSS. If the codepoint is U+1F354, replace the U+ with 0x (zero and x) before passing it in. That’s it. If you want to go further, since you are in JavaScript, you can do all sorts of JavaScripty things. You can have an array of emojis, you can dynamically generate them, and so on:

let emojis = [0x1F600, 0x1F604, 0x1F34A, 0x1F344, 0x1F37F, 0x1F363, 0x1F370, 0x1F355,
              0x1F354, 0x1F35F, 0x1F6C0, 0x1F48E, 0x1F5FA, 0x23F0, 0x1F579, 0x1F4DA,
              0x1F431, 0x1F42A, 0x1F439, 0x1F424];

Tip solutie

Permanent

Follow Us