0

I'm upgrading custom PHP code, that uses Font Awesome 3.2.1, to Font Awesome 4.1. The fabulous upgrade instructions solved all my problems with icons naming conventions change. But, I'm stucked on 3.2.1's icon-white class, which was supposed to make icon white (if I'm not mistaken).

I can't find any equivalent of this class in FA 4.x. Font Awesome is font-based icon set, so there should be no extra class required for the purpose of changing single color. This should be done at CSS level.

Even so, I'm not sure, how should I replace following code to make it compatible with Font Awesome 4.x:

Html::link('<i class="icon-ok icon-white"></i>');

Following mentioned upgrade instructions, I updated icon-ok to fa-check, but what about icon-white? Shall I remove it entirely? Will link generated this way still be white?

trejder
  • 17,148
  • 27
  • 124
  • 216

1 Answers1

3

Font awesome has a new class .fa-inverse for this.

Alternatively..

You can create your own class, simply add icon-white to the CSS for your icon, then define it as:

i.icon-white:before{
  color:white;
}

Font Awesome uses the :before pseudo element for its icons, as such you can style it as you see fit.

Demo Fiddle

SW4
  • 69,876
  • 20
  • 132
  • 137
  • Ah, I see. I was aware, that I can handle this myself, the way, you showed above. But, I was unsure, what was the purpose of removing this class from 4.x, if -- as you suggest -- it was removed entirely, without any equivalent. – trejder May 22 '14 at 09:55
  • 1
    @trejder - just been through the CSS for FA, there is a new class `fa-inverse` which actually will do this. I ammended the above – SW4 May 22 '14 at 09:57