css - Unicode character color issue

Question

I can't change the color on the following characters:

<div style="font-size: 25px; color:red;">&#128269;</div>
<div style="font-size: 25px; color:red;">&#128227;</div>

While some other Unicode characters accept a color property:

<div style="font-size: 25px; color:red;">&#9881;</div>

Is there a way to change color on the previous characters?

https://jsfiddle.net/cs5053ka/

Answer 1

On many systems, emoji characters like ?? and ?? are drawn differently from regular characters. While symbols like % are drawn by filling in a vector outline, emoji are often drawn using a full-color bitmap that doesn't respect your text color.

To change the color of an emoji character, you have a few options:

• Manually recolor the emoji in an image editor and use an <img> tag or CSS background image to display it.
• Use a web icon font like Font Awesome that includes similar-looking icons. Icon fonts are drawn with vector outlines just like regular symbols, so the color property works on them.
• Use a text-shadow hack to fill the emoji with a solid color.

You can also use a variation selector to turn certain emoji into regular characters that can be recolored, but this doesn't work for ?? or ??.