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/

Works for me in Chrome Version 54.0.2840.34 beta-m (64-bit) / FF48.0.2 & IE11...is this browser specific? — Paulie_D, Sep 22 '16 at 16:08
First time I see that characters. But them are colored characters, I think you can't modify the color of them — Marcos Pérez Gude, Sep 22 '16 at 16:08
@Paulie_D in my chrome doesn't work the color on the 3 elements. On firefox works the color for the third element, but not for the two first elements, that them are coloured. — Marcos Pérez Gude, Sep 22 '16 at 16:09
See on firefox: http://s18.postimg.org/xcjxn4mdl/Captura_de_pantalla_2016_09_22_a_las_18_11_15.png — Marcos Pérez Gude, Sep 22 '16 at 16:12
See on chrome: http://s11.postimg.org/e00r5gy9f/Captura_de_pantalla_2016_09_22_a_las_18_12_18.png — Marcos Pérez Gude, Sep 22 '16 at 16:12
Not on Windows,,,,looks like it's OS specific - Chrome - http://s11.postimg.org/b684o79ub/Capture.png — Paulie_D, Sep 22 '16 at 16:13
As you can see, at least on Mac two first elements are coloured. I think this is not solvable with css. But the third element is different on chrome and firefox on the same OS. Weird huh? Maybe a mix of SO + Typography? — Marcos Pérez Gude, Sep 22 '16 at 16:17
Possible duplicate of [Inconsistent Unicode Emoji Glyphs/Symbols](http://stackoverflow.com/questions/29659949/inconsistent-unicode-emoji-glyphs-symbols) — 一二三, Sep 23 '16 at 05:57
On my Linux computer, the characters are all monochrome (that is, red). I'm interested in knowing which fonts @Marcos and the OP are using to display these. — Mr Lister, Sep 23 '16 at 21:15

score 17 · Answer 1 · edited May 23 '17 at 12:17

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 .

Nice. I was beating my head against the wall on changing the color of a unicode PLUS sign. Changing it to a different unicode character worked. I didn't realize that some of the simple characters are bitmaps. — mwilcox, Apr 17 '17 at 17:07

l30.4l3x · Answer 2 · 2023-02-18T13:16:03.703

Another approach is to use variation selector-15, given some codes can have a text form (check this table, extracted from this answer, and this one too). If it is the case, one can apply colors as a plain text. The trick is just to append 65038 (or xFE0E) after your Unicode character, like this:

<span>&#128269;&#65038;</span>   <!-- ︎ -->

<div style="font-size: 25px;">
  <span style="color:red;">&#128269;&#65038;</span>
  <span style="color:green;">&#128269;&#65038;</span>
  <span style="color:blue;">&#128269;&#65038;</span>
</div>
<div style="font-size: 25px;">
  <span style="color:red;">&#x1F508;&#65038;</span>
  <span style="color:green;">&#x1F508;&#65038;</span>
  <span style="color:blue;">&#x1F508;&#65038;</span>
</div>

Unicode character color issue

2 Answers2

Linked

Related