Problems rendering FontAwesome and Glyphicons in Firefox and Internet Explorer

Question

I'm the dev of www.xlent.se and if you try to load the page in IE or FF you'll notice that all icons are replaced by "hex blocks".

The problems only appeared after migrating the project from the development server to the production server. I'm not sure if it's due to caching or MIME-types or something else.

Answer 1

According to your comment it seems that your server doesn't send the right headers. You could solve this by adding the following to your .htaccess file:

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

If you load the files (bootstrap and font-awesome) from a CDN and not from your server use the following:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

Also make sure that you don't load font-awesome multiple times. Your minified CSS already contains the font-awesome and bootstrap.