![](data:image/svg+xml;charset=utf-8,<svg height="349" width="620" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
This issues has to do with Font Awesome icons showing up as squares in Firefox or Google Chrome browser. It looks something like this:
When it should look like:
There can be many possible causes of this issue, and surely I will not cover them all. I will cover two solutions that have helped many people address this issue. The two potential solutions are separated below:
Firefox and now Google Chrome have same-origin policy restrictions. Cross-Origin Resource Sharing (CORS) allows your websites server to retrieve fonts and information from the server those fonts may be hosted on. What this means for Font Awesome, is if you are using a CDN or separate subdomain to host your font files or Nginx/Apache servers, you will need to specify an Access-Control-Allow-Origin header to get the fonts to display properly. If using Google Chrome and you right click > Inspect Element, you may see a similar error, as I did in my debug log:Font from origin 'http://www.meyermed.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://meyermed.com' is therefore not allowed access.
The solution in this case was to modify the .htaccess file in the root directory of my website by adding the following lines below. Notice that they only set access-control-allow-origin for font and css files:# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
Additional Resources:
http://enable-cors.org/server_apache.html
https://github.com/bokmann/font-awesome-rails/wiki/CORS-Cross-Domain-Support
Many users have experienced an issue when upgrading versions of Font Awesome that their directory structure and the font-awesome.css file were not matching. Specifically, their CSS file would look something like this:
But the fonts would actually be stored in ../font/ directory.
In this case, users modify the CSS file to point to the font location on their site.
Alternatively, a webmaster could move their fonts (or rename their directory) to a directory named ../fonts/ to match the font-awesome.css directory.
