0

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) enter image description here

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

Anders Martini
  • 828
  • 1
  • 14
  • 31

2 Answers2

1

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.

Dai
  • 141,631
  • 28
  • 261
  • 374
  • While that didn't actually resolve my problem, it was an interesting read, and I did get the feeling it SHOULD have solved my problem. Upvote earned. =) – Anders Martini Apr 24 '15 at 21:39
  • actually I added a new class and gave it the exact same rule as the font-awesome one, namely content:"\f005"; and it suddenly turned white! I have no idea why, my best guess is that there is some internal rule somewhere in F-A 3.2.1 which made it yellow, and also somehow is impossible to override, which is a ridiculous idea. I'm confused. – Anders Martini Apr 24 '15 at 21:52
  • @AndersMartini Yes, it looks like I'm wrong. I tried it locally and Chrome 42 on Windows 10 Technical Preview always gives me the vector rendering. Weird. – Dai Apr 24 '15 at 21:53
0

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!

Anders Martini
  • 828
  • 1
  • 14
  • 31