How to write color Unicode emoji in the IE

user_10607839 0
Viewed 1063

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.

emoji internet-explorer unicode css html
1 Answers

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;
}
user_119085020
Related