html - 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?

Answer 1

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>