Member Avatar for 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!

Edited by network18
  • 5 Contributors
  • 8 Replies
  • 1K Views
  • 5 Months Discussion Span
  • Latest Post Latest Post by anandvaishnav

Dani AI

Generated

Short diagnosis tied to the thread: the markup in the original post is styling an image (an external SVG used as a background) rather than a font glyph, so color will not recolor it. As observed, an empty element used as a background image cannot be recolored with the CSS color property (that property controls text and inline/SVG fill, not background images). (developer.mozilla.org)

Practical options that work today (pick one):

  • Use Font Awesome as intended (load the library and output the icon glyph). Font Awesome icons inherit color like normal text, so color: #fff will make them white. This is the simplest fix if Font Awesome is an option. (docs.fontawesome.com)

  • Inline the SVG and make its shapes use fill="currentColor", then set color on the container. Example:

    <span class="icon" style="color:#fff;display:inline-block;width:24px;height:24px">
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
    <path fill="currentColor" d="M12 2L2 7v6c0 5 4 10 10 10s10-5 10-10V7L12 2z"/>
  </svg>
</span>

    Inline SVG + currentColor is reliable; note that currentColor will not affect an SVG loaded via background-image URL (that becomes an external resource). (docs.w3cub.com)

  • Keep the SVG external and use CSS masking to “paint” it with a background color (works cross‑browser in modern engines). Example:

    .icon-mask {
  width:24px; height:24px; background-color:#fff;
  -webkit-mask: url('icon.svg') no-repeat center/contain;
  mask: url('icon.svg') no-repeat center/contain;
}

    This treats the SVG as a mask and fills it with the element background color. (developer.mozilla.org)

A note on the Firefox issue and hit: when fonts/icons are loaded cross‑domain (CDN or another host), Firefox (and other browsers) can block them unless the font responses include the proper CORS header (Access-Control-Allow-Origin). Check the devtools console for a CORS font error and, if needed, add the header on the font host (for example via server config). (developer.mozilla.org)

Summary: for the cleanest result, use Font Awesome glyphs (icons inherit color) or inline the SVG with fill="currentColor". The mask approach is a good fallback for external SVG files.

Recommended Answers

All 8 Replies

Member Avatar for 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.

Member Avatar for 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!!)

Member Avatar for OsaMasw

you mean Font awesome from this site ?

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

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

Edited by OsaMasw
Member Avatar for 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.

Member Avatar for 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>
Member Avatar for OsaMasw

349449ccda0a914db569873e29674a06

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

Member Avatar for network18

@OsaMas, thanks for your reply.

Member Avatar for anandvaishnav

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.