There's trouble in using font awesome icons as they suggest, so I am using them as below -

<i class="nimg nicon-ico_help_rnd_lg" style='color: #FFFFFF !important;' alt="Info" title="Color code information" onclick="info()"></i>

and style below -

.nimg {
    height: 37px;    
    width: 37px;
    float: left;
    /*display: table-cell;*/
    display: block;
    text-indent: -9999px;
    vertical-align: middle;
    /*border:1px solid #FFFFFF;*/
    position: relative;
    color: #FFFFFF !important;
    /*background-color: #FFFFFF !important;*/

    background: url("/img/plus27.svg") no-repeat scroll 0 50% / 37px 37px transparent;

since I am trying to output the icons on black background, I want them to be in white color. which I am not able to change despite using 'color: #FFFFFF;' on element.
I would appreciate the quick suggestions.
thank you!

Edited by network18

3 Years
Discussion Span
Last Post by anandvaishnav

I'm not familiar with "font awesome icons", I'm not sure what you're doing here. But since the <i></i> tag in your HTML is empty, it suggests that the icon is actually a background image. If so, you can't control the color with CSS, because the 'color' property only affects text.


Font Awesome, as the name suggests, is a font library of SVGs, so behaves very differently.

Ideally you want to actually use font awesome for something like a plus icon. If not, you can look at things like this: click here (scroll down to the bit about inline SVGs.

Things get very complicated doing everything this way, so I really suggest using the Font Awesome library (and if you've got problems with that, they're probably much easier to fix!!)


Thank you all for the nice suggestions, these options worked for me. but OsaMasw did you notice the fiddle example you gave does not work in the firefox 31 (latest version). I needed it to work in firefox primarily, although it works like a charm in chrome.


ok, I found this - http://davidwalsh.name/cdn-fonts

Now I am wondering how should we modify the default settings for the filesMatch in the conf file as -

<FilesMatch "^\.ht">
    Order allow,deny
    Deny from all
    Satisfy All

Need to include -

<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.