Fix: Font Awesome icons not displaying (only displaying as squares) in Google Chrome and Firefox

This issues has to do with Font Awesome icons showing up as squares in Firefox or Google Chrome browser.

It looks something like this:font-awesome-malfunction

When it should look like:font-awesome-malfunction-fixed

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:

Adding Access-Control-Allow-Origin headers to .htaccess:

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:

1. http://enable-cors.org/server_apache.html
2. https://github.com/bokmann/font-awesome-rails/wiki/CORS-Cross-Domain-Support

Make sure font-awesome.css has appropriate font directory:

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.

credit : http://meyermed.com/2015/03/fix-font-awesome-icons-not-displaying/