CODEWITHSUNDEEP
cssgoogle-chromefont-awesome
user3351236
user3351236

Reputation: 2538

Chrome - Font Awesome 5 some icons are not working

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.

enter image description here

<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>

Upvotes: 6

Views: 36143

Answers (7)

Godda
Godda

Reputation: 1001

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>

Upvotes: 0

logka shunmughum
logka shunmughum

Reputation: 1

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">

Upvotes: 0

himanshu
himanshu

Reputation: 125

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".

Upvotes: 3

vishal jat
vishal jat

Reputation: 141

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>

Upvotes: 9

Abhishek Shah
Abhishek Shah

Reputation: 460

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">

Upvotes: 15

Bhuwan
Bhuwan

Reputation: 16855

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>

Upvotes: 3

andrea06590
andrea06590

Reputation: 1299

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>

Upvotes: 1

Related Questions