cssfont-awesomefont-awesome-4font-awesome-3.2

What is the Font Awesome 4.x equivalent of 3.x's "icon-white" class?


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?


Solution

  • 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