How to prevent emojis rendering in Edge

Question

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?

For reference, that other question he’s referring to seems to be https://stackoverflow.com/q/32915485/1427878 — CBroe, Aug 25 '17 at 14:17

score 9 · Accepted Answer · answered Aug 25 '17 at 14:26

9

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:

answered Aug 25 '17 at 14:26

Dan Kreiger

1

A developer from the Microsoft Edge Team put together this [CodePen Demo](https://codepen.io/prometheusTX/pen/vmZzxG) to show how emojis and symbols are handled in Edge. It should work for you. I've also tested it. [This link](https://learn.microsoft.com/en-us/windows/uwp/style/segoe-ui-symbol-font) might also be helpful. – Dan Kreiger Aug 25 '17 at 14:33

1 Answers1