Emoji display black and white (windows7 chrome, edge)

Question

I add emoji to my website using Emoji Unicode https://www.w3schools.com/charsets/ref_emoji.asp On android, mac & iphone users have color emoticons while on windows7 (chrome and edge) there are black and white emoticons. I did not yet tested windows10.

Ii there any way possible to fix this problem?

SCR preview on my end:

Answer 1

Color fonts are not supported in Windows 7. Windows 7 was released in 2009, just before emoji were added to Unicode. Color font support was added to Windows 8.1. You should consider upgrading to Windows 10.

Answer 2

I hope I can help people out who land on this topic:

As of november 15th I had a similar problem with my emojis. I'm making use of node-emoji. They turned black and white in Google Chrome only (after an update of Google Chrome). Before this update everything was fine.

I figured out that this happens because I applied font-weight: bold to that emoji. When I applied normal weight to it, the emoji went back to their colorful self :-).

Answer 3

Colour emojis aren't supported in Windows 7. This would be the cause of the problem. A way to bypass this on your website, would be to use an emoji library and colouring it with that.

You can do this by going to:

• Twitter Twemoji
• or FontAwesome

You could use other ones, but these are by far the most popular emoji libraries. Twemoji is what Twitter uses for their emojis.

With FontAwesome, you can just find their code on their site, and paste it on your site, and then search for the emoji you want. (You can colour it with color: [color] in your CSS.)

You can use the code below for FontAwesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<i class="fas fa-heart" style="color:red;padding-right:5px;"></i>
<i class="fas fa-grin" style="color:#fcbe03;padding-right:5px;"></i>
<i class="fas fa-thumbs-up" style="color:limegreen;padding-right:5px;"></i>

With Twemoji, it's pretty much the same, but you have to give attribution. They have a guide on their website.