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).
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!