CODEWITHSUNDEEP
htmlcssinternet-explorerunicodeemoji
J4BEZ
J4BEZ

Reputation: 406

How to write color Unicode emoji in the IE

I want to write colored Unicode emoji in IE. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>


<body>
    πŸ˜ΊπŸ˜ΈπŸ˜ΉπŸ˜»πŸ˜ΌπŸ˜½πŸ™€πŸ˜ΏπŸ˜Ύ
</body>
</html>

If I run the code above on chrome and edge, it comes out as a colored cat face emoticon.

But in IE, the emoticons come out all monochrome as below picture. enter image description here

How to use color Unicode emoji in the IE browser?

I'm very sorry for the basic question. But I didn't know which keyword to search for it.
Thank you for reading the questions and I hope you have a good day.

Upvotes: 2

Views: 1493

Answers (1)

SMAKSS
SMAKSS

Reputation: 10520

Actually, I strongly suggest leaving IE alone, since there is no propper support on it anymore. But if you insist on doing this on IE, Microsoft provided a way to deal with this issue. It may seem tricky but AFAIK, it is the only way to make the emojis work as expected. So apparently, Microsoft polished emoji live in a specific system font named Segoe UI Emoji. In order to use it, you just have to define a class or something and then assign it to your specific elements with emojis.

So Your final code should be something like this:

.emoji {
  font-family: "Segoe UI Emoji";
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>


<body>
  <span class="emoji">πŸ˜ΊπŸ˜ΈπŸ˜ΉπŸ˜»πŸ˜ΌπŸ˜½πŸ™€πŸ˜ΏπŸ˜Ύ</span>
</body>

</html>

NOTE: As @mplungjan told us in comments if you want to be more precise with cross browsing functionality you can use below one instead: 

.emoji {
  font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}

Upvotes: 3

Related Questions