Chrome - Font Awesome 5 some icons are not working

Question

I am useing Font Awesome 5. Some icons are not showing in Chrome. For example "fa-facebook-f". When I change the icon class to fa-facebook it works. Is there a way to fix it? Here is what i see in chrome.

<a href="#" target="_blank" class="icon-facebook">
    <i class="fab fa-facebook-f">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-twitter">
    <i class="fab fa-twitter">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-google_plus">
    <i class="fab fa-google-plus-g">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-pinterest">
    <i class="fab fa-pinterest">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-linkedin">
    <i class="fab fa-linkedin-in">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-instagram">
    <i class="fab fa-instagram">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-tumblr">
    <i class="fab fa-tumblr">
    </i>
  </a>

Granulate

Wait, why are you using it like that fa fa-facebook-f ? – Exertion

which url/cdn are you using to pull the icons? Is it just the chrome that has the issue? – Admeasure

Make sure your site is not loading several versions of FontAwesome. I had the same issue, and resolved by it ensuring at least all includes were at the same version, waiting until it's cleaned up to have it only included once. – Crambo

Answer 1

Import this css it will work for all the font awesome icons and also for all the versions of icons it will work.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">

Goldi

Very good solution - youtu.be/tGD6xRMrtcQ – Curare

For latest version use this : <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css"> – Goldi

Answer 2

Add this code in your HTML file before body and style tag

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">

And remember one thing that use class of that type

fab fa-linkedin

in some site it is given as

fa fa-linkedin

which is not working so use 'fab' in place of 'fa'

And you can use this icon in your website for testing purpose you can use this code

<div class="row text-center">
      <!-- Team item-->
      <div class="col-xl-3 col-sm-6 mb-5">
        <div class="bg-white rounded shadow-sm py-5 px-4"><img src="https://res.cloudinary.com/mhmd/image/upload/v1556834132/avatar-4_ozhrib.png" alt="" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm">
          <h5 class="mb-0">Vishal Jat</h5><span class="small text-uppercase text-muted">CEO - Founder</span>
          <ul class="social mb-0 list-inline mt-3">
            <li class="list-inline-item"><a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a></li>
            <li class="list-inline-item"><a href="#" class="social-link"><i class="fab fa-twitter"></i></a></li>
            <li class="list-inline-item"><a href="#" class="social-link"><i class="fab fa-instagram"></i></a></li>
            <li class="list-inline-item"><a href="#" class="social-link"><i class="fab fa-linkedin"></i></a></li>
          </ul>
        </div>
      </div>

Orthicon

Answer 3

Its working fine...Its maybe you are not linking the correct font-awesome file

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<a href="#" target="_blank" class="icon-facebook">
  <i class="fab fa-facebook-f">
    </i>
</a>
<a href="#" target="_blank" class="icon-twitter">
  <i class="fab fa-twitter">
    </i>
</a>
<a href="#" target="_blank" class="icon-google_plus">
  <i class="fab fa-google-plus-g">
    </i>
</a>
<a href="#" target="_blank" class="icon-pinterest">
  <i class="fab fa-pinterest">
    </i>
</a>
<a href="#" target="_blank" class="icon-linkedin">
  <i class="fab fa-linkedin-in">
    </i>
</a>
<a href="#" target="_blank" class="icon-instagram">
  <i class="fab fa-instagram">
    </i>
</a>
<a href="#" target="_blank" class="icon-tumblr">
  <i class="fab fa-tumblr">
    </i>
</a>

Percaline

So why it is working in Firefox, no chrome, also why some of them are showing? – Granulate

@Granulate is the above snippet working for you...? – Percaline

Answer 4

You can use "fab" in class instead of "fa"

<i class="fab fa-linkedin"></i>

This will surely work. Replace "fa" with "fab" or "fas".

Lunn

Answer 5

Have you imported the css, js but also the etf files which describes the font ?

If yes, then try this class name instead of "fab" which is not referenced in the doc

<i class="fas fa-camera-retro"></i>

Ushas

Answer 6

This class name works fine for linkedin:

<i class="fab fa-linkedin-in" aria-hidden="true"></i>

used the below link in index.html under head tag :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">

Mound

Answer 7

I notice when i add this part to the font-awesome/5.15.4/ library doesn't load.

integrity="sha512-Vw3RTv7vrqtzj7Umk17DszsotZa6PXj5dnTEszUbnvmVq7Jpj27GPvmXzQkMV6mPvhj1g+YY4fb7DrlLBwTVlw==" crossorigin="anonymous" referrerpolicy="no-referrer"

But when i do something like this instead all the icons seem to load perfectly from the library.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<a href="#" target="_blank" class="icon-facebook">
  <i class="fab fa-facebook-f">
    </i>
</a>
<a href="#" target="_blank" class="icon-twitter">
    <i class="fab fa-facebook"></i> 
    </i>
</a>
<a href="#" target="_blank" class="icon-twitter">
     <i class="fab fa-twitter">
    </i>
</a>
<a href="#" target="_blank" class="icon-twitter">
     <i class="fab fa-google"></i> 
</a>

Predator