5

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?

11
  • your code snippet is working. Which fontawesome' version are you using in your web? Commented Feb 24, 2020 at 12:28
  • I've tried with 4.7.0, 5.12.1 etc. None of the version can make both the thing work.
    – v0ld3m0rt
    Commented Feb 24, 2020 at 12:34
  • in 5x fa fa-google may not work. check there official website. They updated classes. Commented Feb 24, 2020 at 12:35
  • I'm not trying fa5 or anything. Just plain icon
    – v0ld3m0rt
    Commented Feb 24, 2020 at 12:37
  • of you are using 4x, the example you shared is working fine. Commented Feb 24, 2020 at 12:37

3 Answers 3

8

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>

3

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

-1

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.

2
  • Thanks for the help. But now add <i class='fa fa-calculator' style='font-size: 48px; color: #338bb7'></i><i class='fa fa-brain'></i>. The icon for brain will not show.
    – v0ld3m0rt
    Commented Feb 24, 2020 at 12:50
  • 1
    <i class='fa fa-brain'></i> Does not appear because there is no such class font-awesome 4.7.0. Brain icon came in later versions. Try to downloading SVG or in font format. Otherwise use upgraded versions. Commented Feb 24, 2020 at 13:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.