CODEWITHSUNDEEP
htmlcss
beginnercoder101
beginnercoder101

Reputation: 47

Why is my icons showing squares on Font Awesome?

Trying to figure out why icons are showing white icons. I have already tried changing 'fab' to 'fa' but no luck. Has anyone else come across this problem using Font Awesome?

* {
  font-family: 'Open Sans', sans-serif !important;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">




<ul>
  <li><a><i class="fas fa-facebook"></i></a></li>
  <li><a><i class="fas fa-twitter"></i></a></li>
  <li><a><i class="fab fa-youtube"></i></a></li>
  <li><a><i class="fab fa-instagram"></i></a></li>
</ul>

Upvotes: 3

Views: 6661

Answers (6)

monkey
monkey

Reputation: 543

Wrong Version

All you have to do is turn them all into fa-fa, then remove the font. You should use Font Awesome version 4.70.0 for this (shows the old youtube logo.):

https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css.

If you don't want to do that, you'll have to go to the 5.12.0 version of Font Awesome, which I wouldn't want to do - just type the above link instead of the one in your code. full code:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">




<ul>
  <li><a><i class="fa fa-facebook"></i></a></li>
  <li><a><i class="fa fa-twitter"></i></a></li>
  <li><a><i class="fa fa-youtube"></i></a></li>
  <li><a><i class="fa fa-instagram"></i></a></li>
</ul>

Upvotes: 0

VSM
VSM

Reputation: 1785

<!DOCTYPE html>
<html>
<head>
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
</head>

<!DOCTYPE html>
<html>
  <body>
    <ul>
        <li><a><i class="fa fa-facebook"></i></a></li>
        <li><a><i class="fa fa-twitter"></i></a></li>
        <li><a><i class="fa fa-youtube"></i></a></li>
        <li><a><i class="fa fa-instagram"></i></a></li>
      </ul>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">   
</head>

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li><a><i class="fab fa-facebook-f"></i></a></li>
      <li><a><i class="fab fa-twitter"></i></a></li>
      <li><a><i class="fab fa-youtube"></i></a></li>
      <li><a><i class="fab fa-instagram"></i></a></li>
    </ul>
  </body>
</html>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106068

Why is my icons showing squares on font awesome?

many reason:

  • First of all, you reset the font-family, so no way to get the icone to show. , then :

    • you are using the wrong library (or the wrong class naming)
    • wrong class names for some

you can filter all of your class starting with fa to avoid overwritting the font-family that shows icons.

example below , filtering icon containers via the :not() selector, adding the good library and fixing class name for facebook and twitter. 

*:not([class^="fa"]) {
  font-family: 'Open Sans', sans-serif !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />





<ul>
  <li><a><i class="fab fa-facebook-f"></i></a></li>
  <li><a><i class="fab fa-twitter"></i></a></li>
  <li><a><i class="fab fa-youtube"></i></a></li>
  <li><a><i class="fab fa-instagram"></i></a></li>
</ul>

Upvotes: 3

Manan
Manan

Reputation: 24

Your code should look like the following just wrong font awesome class for icon 

<!DOCTYPE html>
<html>
<head>
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">   
<style>
    *{
    font-family: 'Open Sans', sans-serif;
}

</style>
</head>

<!DOCTYPE html>
<html>
  <body>
    <ul>
        <li><a><i class="fa fa-facebook"></i></a></li>
        <li><a><i class="fa fa-twitter"></i></a></li>
        <li><a><i class="fa fa-youtube"></i></a></li>
        <li><a><i class="fa fa-instagram"></i></a></li>
      </ul>
  </body>
</html>

Upvotes: 0

Pustur
Pustur

Reputation: 177

Your style tag is overriding the font that fontawesome is providing to display the icons.

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

Removing the !important will suffice.

Also the class to apply to the <i> tags is fa (not fab or fas)

Upvotes: 2

Natalia Davydova
Natalia Davydova

Reputation: 748

Check working code snippet.

In your code you have 2 issues:

1) fas and fab need to be changed to fa

2) all <i> items need to be of font-family fontawesome, and your code:

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

just rewrites their default styles and icons can't be rendered. Better don't use * selector with style rules like font-family to avoid such issues. So you can either remove these lines, or explicitly tell <i> tags to be of proper font-family, like in my code snippet.

Upvotes: 5

Related Questions