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

Using a CDN as premjg suggested is the least invasive method besides hosting it yourself. The latest version of fontawesome suggests bootstrapcdn, e.g.,

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

As a minor note, noscript silently blocks requests to the CDN unless whitelisted, and it won't prompt you to whitelist the CDN unless your page also requests JS files from the same domain.

Answer 2

I have put code in .htacces

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

It is working fine now. Thanks. Appreciate your help

Answer 3

I was having issue with the if statement because I didn't have a $filename variable.

But I did have similar results using:

location ~ /\.(eot|otf|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }