Featured templates

What if Font Awesome icons don’t show up?

Vicki Hayes September 26, 2016
Rating: 5.0. From 4 votes.
Please wait...
  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("");
  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.


    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 "*"

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

Feel free to check the detailed video tutorial below:

What if Font Awesome icons don’t show up?
This entry was posted in Working with fonts and tagged fontawesome, icons, missing, troubleshooter. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket