Font awesome is not showing icon

In my case i made the following mistake in my css code.

*{
    font-family: 'Open Sans', sans-serif !important;
}

This will override all font family rules for the entire page. My solution was to move the code to body like so.

body{
    font-family: 'Open Sans', sans-serif;
}

NB: Whenever you use the !important flag in css, any other css rule declared of the same type on the same element will get overriden.

When you open font-awesome.min.css you can see following path:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

It means that you have to create directory Fonts and then copy files fontawesome-webfont.ttf (fontawesome-webfont.woff, fontawesome-webfont.eot) to this folder. After that everything should work fine.

Be aware that the new version (5) of font awesome uses "fas" or "fab" instead of "fa" prefix.

Quoted from their website:

The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.

This is why my fonts were showing blank squares. Now fixed.

Example code:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

See: https://fontawesome.com/icons/facebook-f?style=brands

First, check that you have class="fa" as well as whatever the icon's class is. So, not just

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

But also

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

Then it works as expected. This solved my issue.

Open your font-awesome.css theres code like :

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

you must have folder like :

font awesome -> css
 -> fonts

or the easiest way :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Font awesome is not showing icon

Related

Recent Posts