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

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?