Font Awesome icons are not working, I have included all required files [closed]

For seekers of missing font-awesome icons, I have collected a few ideas:

  • Assure you use a correct link to the CDN, such as:

    <link 
      href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
      rel="stylesheet"  type="text/css">
    
  • If your page uses HTTPS, do you link to the font-awesome CSS using HTTPS (replace http:// with https:// in the link above).

  • Double check that you don’t have AdBlock Plus or uBlock enabled. They might be blocking some of the icons.

  • Reset your browsers cache. (On Chrome do a looong click on the reload button and select Hard Cache Reset)

  • Assure that the <span> or <i> element you use, uses the FontAwesome font family. For example, it must not just

    <i class="fa-pencil" title="Edit"></i>
    

    but

    <i class="fa fa-pencil" title="Edit"></i>
    

    It won’t work if you have something as the following in your CSS:

    * {
      font-family: 'Josefin Sans', sans-serif !important;   
    }
    
  • If you are using IE8, are you using a HTML5 Shim?

  • If this doesn’t work, there are further Troubleshooting Ideas on the Font Awesome Wiki.

Leave a Comment