CODEWITHSUNDEEP
cssfont-awesome
v0ld3m0rt
v0ld3m0rt

Reputation: 904

Why some of the FontAwesome icons are not showing?

I'm trying to create a social sharing module in my Java web application. I'm using this example from w3schools. I already had fontawesome icons in the project but for some reason after adding the following code only either of them (social icons or old icons in the site) are working. They are showing square icons or no icons on switching with various cdn links of fontawesome css.

     <link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css"
	crossorigin="anonymous">
    <!-- Load font awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- The social media icon bar -->
    <div class="icon-bar">
      <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
      <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
      <a href="#" class="google"><i class="fa fa-google"></i></a>
      <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
      <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
      <i class='fa fa-brain'></i>          
      <i class='fa fa-calculator'></i>          
    </div>

I've not added the css code from the example though. What am I doing wrong?

Upvotes: 5

Views: 19369

Answers (3)

Yousef Altaf
Yousef Altaf

Reputation: 2773

Be sure to use only icons from the free set if you do not have a pro license. https://fontawesome.com/icons?d=gallery&m=free

Upvotes: 3

waqas Mumtaz
waqas Mumtaz

Reputation: 697

You are using few icons from fontawesome 5. for example fa-brain. You need to update css link and font classes accordingly.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous">

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

<!-- The social media icon bar -->
<div class="icon-bar">
  <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
  <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
  <a href="#" class="google"><i class="fab fa-google"></i></a>
  <a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
  <a href="#" class="youtube"><i class="fab fa-youtube"></i></a>
  <a href="#" class="calculator"><i class="fas fa-calculator"></i></a>
  <a href="#" class="brain"><i class="fas fa-brain"></i></a>
</div>

Upvotes: 8

Manas Khandelwal
Manas Khandelwal

Reputation: 3931

The icons are working fine.

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css"
crossorigin="anonymous">

<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- The social media icon bar -->
<div class="icon-bar">
  <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
  <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
  <a href="#" class="google"><i class="fa fa-google"></i></a>
  <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>

Check Codepen: https://codepen.io/manaskhandelwal1/pen/YzXNNLw

There is some another variability in your code.

Upvotes: -1

Related Questions