Problem
Font Awesome fonts aren’t loading correctly on your website, instead you see a square with a number inside, e.g. F019).
Solution
For me, this problem started when I followed a SEO recommendation to serve images from a cookieless domain.
The solution was as easy as adding the following to the .htaccess file at the root directory of my website.
Replace domainname with the domain name for your website
## EXPIRES CACHING ##
# ------------------------------------------------------------------------------
# | CORS-enabled images |
# ------------------------------------------------------------------------------
<FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "http://www.domainname.com" env=IS_CORS
</FilesMatch>
# ------------------------------------------------------------------------------
# | Web fonts access |
# ------------------------------------------------------------------------------
# Allow access from all domains for web fonts
<FilesMatch "\.(eot|otf|ttc|ttf|woff)$">
Header set Access-Control-Allow-Origin "http://www.domainname.com"
</FilesMatch>
If this doesn’t help, check your page source to ensure the Font Awesome style sheet is being called and is being loaded. More information on how to do this can be found here: http://fortawesome.github.io/Font-Awesome/get-started/
Next, check the class where you are loading the icons – BOTH fa and the fa code needs to be included, for example:
<i class="fa fa-download"></i>