unicode character color issue

问题

Can't change 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 chars accept color property:

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

Is there any way to change color on the previous chars?

https://jsfiddle.net/cs5053ka/

回答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 📣.

来源：https://stackoverflow.com/questions/39643850/unicode-character-color-issue