Unicode Character Color Issue

How to change the color of a unicode character

No. The color is inherent to the character -- there's a LARGE BLUE CIRCLE as well (U+1F535 - ), but no other colors are currently defined by the Unicode standard.

How to style a unicode character?

You can try with filter

.red {

  color: red;

  background-color: yellow;

}

.red > span {

   filter: hue-rotate(180deg) saturate(10);

}

<span class="red">DROPLET <span>lt;/span></span>

Chrome Rendering of unicode Heavy Plus/Minus/Division Sign

The problem is that the browser is replacing the glyphs with emoji, which will be rendered differently for each browser. Emoji cannot be colored using CSS -- the best you can do is silhouette them and color the silhouette, as described in Color for Unicode Emoji. Unfortunately, this still means that the glyphs will appear differently on different browsers, as the emoji won't render using the font you specify.

There isn't currently a way to force browsers to render glyphs instead of emoji. Appending \FE0E (as described in How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?) will sometimes work, but this is not consistent, not guaranteed, and therefore not recommended.

You can provide a web font which contain the glyphs you need, but this is also not guaranteed to work, as some browsers (especially on mobile devices) will still replace them with emoji.

If you require consistent rendering, the best way seems to be to use an image instead of trying to force the browser not to use an emoji.

---

Related Topics