What if Font Awesome icons don’t show up?

1. Font Awesome icons are not working locally unless you are serving FontAwesome from a CDN.

   • You are not using plugins/extensions which are loading older/modified versions of Font Awesome;

   • Your browser’s development console shows that you are loading the proper font files;

   • Your browser’s extensions are not blocking webfonts (noscript, adblockplus, etc.);

   • Your operating system is not blocking webfonts (Microsoft Group Policy).

2. If Font Awesome icons are displayed as squares just add following code into your stylesheet file:

   @import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

   

3. If icons do not work only in specific areas, you can locate a css rule that controls styles for element that holds the icon using Firebug tool and specify a font-family for it.

   Example:

   i {
   font-family: fontawesome !important;
   }

   

   Note, it is better to use specific CSS classes in order not to effect site globally.

4. If Font Awesome icons are not displayed in Firefox/IE only, please, add the following code into your .htaccess file:

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

Pay attention to our wide collection of highly professional website templates if you need more!

Feel free to check the detailed video tutorial below: