CODEWITHSUNDEEP
htmlcsswebemoji
room13
room13

Reputation: 1013

Html character emoji does not render

I want to add emojis in a html page, eg. 🇬🇧 but they do not render with the colorized icon.

I tried the follwing

  <meta charset="utf-8" />
  <body>
    🇬🇧
    🐑
  </body>
</html>

And it does not show the colorized icons of the UK flag and sheep respectively. I as well tried wrapping the emoji characters in a span but it neither works. Maybe is something related to the fonts?

Upvotes: 2

Views: 6712

Answers (1)

Sandrogo
Sandrogo

Reputation: 596

The rendering of the emojis is depending on the font you use to display them. Emojis are just normal characters like the letter "A" and need to be defined in the font you are using on your page. To display emojis correctly, you need to use a font which has these emojis defined and set the <span> (or your whole page) to use that font (with CSS).

Here is an explanation on Emojis. And here is an example on how to use the Google Noto Emoji Color font (free to use) on your website:

1- Download the font (here)

2- Embed it into your CSS:

@font-face {
    font-family: "Noto Emoji Regular";
    src: url('NotoEmoji-Regular.ttf')  format('truetype');
}

Make sure the url has the right path to the local .tff file and add this to your page <style> definition or CSS file.

Upvotes: 3

Related Questions