fa-star (&#xf005) is always yellow, how to make it white?

Question

setting color:white; or even using the class icon-light or icon-white makes all font-awesome-icons white, except for fa-star which remains yellow no matter what I do!

I've tried overriding css with methods as desperate as using !important in an inline-styling on the element. the star remains yellow! (see image below)

Why is this, and how do I make it white?

(Using font-awesome 3.2.1 in order to support IE7, don't ask me why)

essentially this is my markup:

<i class="icon-white icon-star" style="color:white;"></i>

Or as it stands when I took the screenprint bellow:

<i class="icon-light icon-star" style="color:white !important;"></i>

as can be seen in the image, this inline-style rule essentially overrides a bunch of other css-rules saying the same thing; color should be white.

whats extra-funny about this behaviour is that chromes debugger under "Computed Styles" actually claims that the star IS white. which as you can see is not the case.

EDIT: I actually managed to solve this, but I have no idea why my solution works, so I'll leave the question open in hope someone might provide insight into what is actually going on here. Here's what I did:

If you look into font-awesome.css you'll find the following block:

.icon-star:before{
content:"\f005";
}

As a first step in my continued research of this mysterious error, I changed the class on my <i> to white-star and added the following to my stylesheet:

 .white-star:before{
 content:"\f005";
}

from there I was going to experiment with some other things when I to my surprise noticed that the star was white!

This is no longer an issue in need of solving, But I really would like to know whats going on here, so I'll just leave the question open in hope that someone might provide some insight (for me and the community).

Answer 1

So I finally figured it out. And of course the solution was obvious!

The Color for icon-star is set on the .icon-star:before element. What I was doing wrong here was setting color rules to the .icon-star element. Colors are of course inherited, but inheritance does not override rules set directly to child-elements(doh!). This is why adding !important had no effect.

Moral is: When styling FA-icons, set styles to the pseudo-element, not the parent!

Answer 2

The yellow is because it's a bitmap emoji. To get a vector (colorless) symbol you need to suffix the character with UNICODE VARIATION SELECTOR-15 which forces rendering to vector. This is documented here: http://mts.io/2015/04/21/unicode-symbol-render-text-emoji/

VARIATION SELECTOR-15 is U+FE0E.