Font awesome not working in Firefox - 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">

Answer 3

If you are hosting the font on S3, you have to enable CORS on the bucket. Through AWS Management Console, edit the properties for the bucket and under Permissions click on "Add CORS Configuration". In my case, if I left the default config, it still didn't work, so I changed it to:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

Answer 4

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

Answer 5

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 6

If you're like me, modifying a web.config file is something you're not allowed to touch.
Try storing all the font files (.eot, .ttf, etc) into their own local folder, and link to them locally instead of the FontAwesome CDN. Cleared it up in IE and FF for me every time.
#font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }

Answer 7

If you're using wordpress and you think you've tried everything, look and see if you ever installed a Font Awesome plugin. Disable the plugin and refresh in Firefox.
This was the solution for me - the plugin's older version of font-awesome was overriding the files I was trying to update myself manually.

Answer 8

In fonts folder please upload the following files
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ Important glyphicons files----------------
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Please upload the following files and after that you link your font-awesome.min.css in your header file.
Here is the following link with proper files:
http://goo.gl/WICQAf