Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent emojis rendering in Edge

I am using HTML entity ✔ (✔) in various colors to indicate what options are chosen by a user.

As it turns out, MS Edge turns some UTF-8 characters into emojis which make my design unreadable - I can no longer change their colors with CSS.

I found out in another question that replacing ✔ with ✔︎ (✔︎) should do the trick, but it does not seem to be working with Edge.

Is there another way to do it, is it impossible, or am I missing something?

like image 631
Adam Avatar asked Aug 25 '17 14:08

Adam


People also ask

How do you prevent Unicode characters from rendering as emoji in HTML?

The UTF has special characters to control the rendering. These special characters tell the OS/browser if it is required to covert the previous glyph to emoji or disable emoji and render it as a text: ️ – disable emoji and render the previous glyph as a text.

How do I stop Unicode from turning into Emojis?

So, if you need to disable emoji in your text, convert the symbol to UTF-8 or UTF-16 sequence ( symbol. codePointAt(0).

How do I add Emojis to Microsoft edge?

To begin using the software Emoji Keyboard, simply click on the software icon and choose the emoji you want to use. Paste the emoji you wish to use into Skype/Slack/Facebook Messenger etc once you have chosen the emoji which best describes your mood at the moment.


1 Answers

Try adding font-family: "Segoe UI Symbol"; to your css containing the HTML entity.

For example:

span {
  font-family: "Segoe UI Symbol";
}
<span>&#10004;&#xFE0E;</span>

From there you will be able to style your HTML entity. I've tested this on Edge and have confirmed that it works.


The thread below addresses this issue you are having:

  • https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11635143/
like image 69
Dan Kreiger Avatar answered Sep 20 '22 10:09

Dan Kreiger