font awesome icons color change

[network18]

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;*/
}

.nicon-ico_add_rnd_sm{
    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!

[rtrethewey]

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.

[mattster]

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

[OsaMasw]

you mean Font awesome from this site ? http://fortawesome.github.io/Font-Awesome/

so the html tag for it is <i class="fa fa-android fa-inverse fa-5x"></i>

http://jsfiddle.net/hawkiq/jszt3yy9/3/

[network18]

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.

[network18]

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
</FilesMatch>

Need to include -

<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

[OsaMasw]

as you see am using latest version of Firefox 31
windows 7 Ultimate x64

[network18]

@OsaMas, thanks for your reply.

[anandvaishnav]

Get full list of Font awesome icons and way to use font awesome class with diffrent methods and Unicode

VIEW DEMO