If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

What if Font Awesome icons don’t show up?

What_if_Font_Awesome_icons_do_not_show_up_img1
  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");
    What_if_Font_Awesome_icons_do_not_show_up_img2
  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;
    }
    What_if_Font_Awesome_icons_do_not_show_up_img3

    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:

What if Font Awesome icons don’t show up?
 
Live Chat
We help you to choose the right product.
Start chat