Font awesome not working in Firefox

Question

I'm using bootstrap and I added font awesome through Less, overriding the Glyphicons. The icons display OK in chrome but in Firefox i just see boxes.

This is how my directory looks like

-- Project   -- js   -- css   -- less   -- font-awesome     -- css     -- font     -- less 

All I've modified in the Project > less > boostrap.less file has been:

@import "sprites.less";  //for this line  @import "../font-awesome/less/font-awesome.less"; 

As I said in Chrome works fine but for some reason Firefox shows only boxes.

Answer 1

Custom web fonts via CDN (or any cross-domain font request) doesn't work in Firefox or Internet Explorer (correctly so, by spec) though they do work (incorrectly so) in Webkit-based browsers.

You can fix this by adding headers to your page.

Apache

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

Nginx

if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){     add_header Access-Control-Allow-Origin *; } 

Credit: http://davidwalsh.name/cdn-fonts

Answer 2

If you want a quick and easy way to make Font-awesome work, try using CDNJS. It's free and powered by CloudFlare. CORS is supported out of the box.

Try something like this:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">