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

setting color:white; or using class icon-light or icon-white makes font-awesome-icons white, except fa-star remains yellow no matter do!

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

why this, , how make white?

(using font-awesome 3.2.1 in order support ie7, don't ask me why) enter image description here

essentially markup:

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

or stands when took screenprint bellow:

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

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

whats extra-funny behaviour chromes debugger under "computed styles" claims star white. can see not case.

edit: managed solve this, have no idea why solution works, i'll leave question open in hope might provide insight going on here. here's did:

if font-awesome.css you'll find following block:

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

as first step in continued research of mysterious error, changed class on <i> white-star , added following stylesheet:

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

from there going experiment other things when surprise noticed star white!

this no longer issue in need of solving, know whats going on here, i'll leave question open in hope might provide insight (for me , community).

the yellow because it's bitmap emoji. vector (colorless) symbol need suffix character unicode variation selector-15 forces rendering vector. documented here: http://mts.io/2015/04/21/unicode-symbol-render-text-emoji/

variation selector-15 u+fe0e.

UV code