Fontawesome is not working(Solved)

JavaScript
1

Tell us what’s happening:
I don’t really know why the social media icons are not showing on the webpage, please can someone help me out? am using fontawesome for the icons.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <title>Personal Portolio</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <aside>
    <nav class="nav-bar">
      
        <img src="#" alt="">
      <a href="#home"><i class="material-icons md-36">home</i>
        <p>Home</p>
      </a>
        
      <a href="#about"><i class="material-icons md-36">person</i>
        <p>About</p>
      </a>
      <a href="#Portfolio"><i class="material-icons md-36">image</i>
        <p>portfolio</p>
      </a>
      <a href="#contact"><i class="material-icons md-36">mail</i>
        <p>contact</p>
      </a>
      </nav>
    </aside>
    <nav class="mobile_nav">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#portfolio">Portfolio</a>
      <a href="#contact">Contact</a>
    </nav>
    <div class="introduction" id="home">
      <header>
        <h1>I'm Obok Casmir</h1>
       <h3>Web Developer, UI/UX Designer, Front-End Developer and Watson Chatbot Designer</h3>
        <img src="#" alt="">
      </header>
   </div>
    
     <section>
    <div class="about" id=about>
      <h2>About Me</h2>
         <p><span>Hello, I'm Obok Casmir(Cassyblaise) </span> I'm web developer, wordpress designer and Watson chatbots designer. life long life learner, and always ready for new opportunities. My hobbies are: Reading, love good music, watching football and I like going out for a long walk.  </p>
        
  <p>I am very outgoing happy person and show this in my work. I can relate to the person in both my talking and writing style. I have a style that is very direct and honest. Most people consider it easy to understand what I'm saying even those who aren't native English speakers.
</p>
   <p>I believe in users centered design and delivering the best possible experiences to clients. I have experience with HTML, CSS3, Flexbox, CSS Grid, JavaScript, jQuery WordPress Design and also Watson Chatbot Designer. I can use these technologies to build you a dynamic and personalized website from scratch.
I also have some experience in the following online programs: WordPress,  Webpack, Zoho, Git, Github, Slack, and many others including proprietary versions. One of my best traits is that I can learn new systems relatively easy, so even if I've never used your particular system. I am a quick learner. 
 </p>
        <h3>My Skills</h3>
        <p>Html5</p>
        <div class="container">
        <div class ="Skills html">85%</div>
        </div>
        
         <p>CSS3</p>
        <div class="container">
        <div class ="Skills css">80%</div>
        </div>
        
        <p>Bootstrap</p>
        <div class="container">
        <div class ="Skills bootstrap">75%</div>
        </div> 
      
       <p>JavaScript</p>
        <div class="container">
        <div class ="Skills JS">65%</div>
        </div> 
        
        <p>JQuery</p>
        <div class="container">
        <div class ="Skills JQuery">50%</div>
        </div> 
        
       </div>
    </section>
    
    <section class="portfolio" id="portfolio">
      <h2>portfolio</h2>
      <div class="row-halves">
        <div class="col">
          <img src="#" alt="">
          <h3>Business</h3>
          <p>
            Building Responsive and thoughtful websites for small and large businesses.
            </p>
        </div>
        <div class="col">
          <img src="#" alt="">
          <h3>Mobile</h3>
          <p>
            Fully Responsive, mobile ready design and implementation for all clients.
            </p>
        </div>
        </div>
      
      <div class="row-halves">
        <div class="col">
          <img src="#" alt="">
          <h3>UX/UI Designs</h3>
          <p>
            Thoughtful and intuitive users experinces. all of my designs will be guaranteed to my clients. 
            </p>
        </div>
        <div class="col">
          <img src="#" alt="">
          <h3>Personal</h3>
          <p>
           I also build and design for personal projects. no idea is too small. everyone deserve a voice on the web.
            </p>
        </div>
        </div>
      </section>   
        
    <section class="contact" id="contact">
      <h2>Contact</h2>
      <div class="header">
    <h1>Let's work together...</h1>
    <p>How do you take your coffee?</p>
  </div>
      <a href="https://facebook.com"><i class="far fa-2x fa-facebook"></i></a>
      <a href="https://twitter.com" target="_blank" class="contact-details""><i class="fa fa-3x fa-twitter"></i></a>
      <a href="https://github.com"><i class="far fa-2x fa-github"></i></a>
      <a href="https://skype.com"><i class="fa fa-3x fa-skype"></i></a>
    </section>
        
    <footer>
      <p>&copy 2018 | All rights reserved</p>
    </footer>   
        
      
      
  </body>
</html>
2

Hey @cassyjay,

Here, you are linking the version 5.5 of font-awesome.
And in version 5.5 fab class is given to i element instead of fa class.

So, th above code should be:

<a href=“https://facebook.com”><i class=“fab fa-2x fa-facebook”></i></a>

And similarly for other icons.

Hope this helps.
All the best.

3

hey @aditya_p
I have try it out and it’s still not working. I don’t know why.

4

take a look at the following line, taken from your code. Do you see a problem?

    <a href="https://twitter.com" target="_blank" class="contact-details" "><i class="fa fa-3x fa-twitter"></i></a>

hint: count quotes.

May or may not be related. But as @aditya_p says, you need to change the fa class to fab (for fontAwesome Brands, I assume). Changing only that, and fixing the quote error I mention above, results in working icons. I’ve set it up on my test server, and (while the REST of your CSS is missing), the fontawesome bits work fine.

5

If it still doesn’t work, could you post your latest code?

1 Like
6

@aditya_p @snowmonkey

I had try everything i could, but isn’t working out. the only thing I observed is when i to use other icons like truck, clock, etc.they work out perfectly. is just the social media icons that’s giving me headache. please below are my latest codes :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <title>Personal Portolio</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <aside>
        <nav class="nav-bar">

            <img src="#" alt="">
            <a href="#home"><i class="material-icons md-36">home</i>
                <p>Home</p>
            </a>

            <a href="#about"><i class="material-icons md-36">person</i>
                <p>About</p>
            </a>
            <a href="#Portfolio"><i class="material-icons md-36">image</i>
                <p>portfolio</p>
            </a>
            <a href="#contact"><i class="material-icons md-36">mail</i>
                <p>contact</p>
            </a>
        </nav>
    </aside>
    <nav class="mobile_nav">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#portfolio">Portfolio</a>
        <a href="#contact">Contact</a>
    </nav>
    <div class="introduction" id="welcome-section">
        <header>
            <h1>I'm Obok Casmir</h1>
            <h3>Web Developer, UI/UX Designer, Front-End Developer and Watson Chatbot Designer</h3>
            <img src="#" alt="">
        </header>
    </div>

    <section class="about" id="about">
        <div class="about" id=about>
            <h2>About Me</h2>
            <p><span>Hello, I'm Obok Casmir(Cassyblaise) </span> I'm web developer, wordpress designer and Watson
                chatbots designer. life long life learner, and always ready for new opportunities. My hobbies are:
                Reading, love good music, watching football and I like going out for a long walk. </p>

            <p>I am very outgoing happy person and show this in my work. I can relate to the person in both my talking
                and writing style. I have a style that is very direct and honest. Most people consider it easy to
                understand what I'm saying even those who aren't native English speakers.
            </p>
            <p>I believe in users centered design and delivering the best possible experiences to clients. I have
                experience with HTML, CSS3, Flexbox, CSS Grid, JavaScript, jQuery WordPress Design and also Watson
                Chatbot Designer. I can use these technologies to build you a dynamic and personalized website from
                scratch.
                I also have some experience in the following online programs: WordPress, Webpack, Zoho, Git, Github,
                Slack, and many others including proprietary versions. One of my best traits is that I can learn new
                systems relatively easy, so even if I've never used your particular system. I am a quick learner.
            </p>
            <h3>My Skills</h3>
            <p>Html5</p>
            <div class="container">
                <div class="Skills html">85%</div>
            </div>

            <p>CSS3</p>
            <div class="container">
                <div class="Skills css">80%</div>
            </div>

            <p>Bootstrap</p>
            <div class="container">
                <div class="Skills bootstrap">75%</div>
            </div>

            <p>JavaScript</p>
            <div class="container">
                <div class="Skills JS">65%</div>
            </div>

            <p>JQuery</p>
            <div class="container">
                <div class="Skills JQuery">50%</div>
            </div>

        </div>
    </section>

    <section class="portfolio" id="projects">
        <h2>portfolio</h2>
        <div class="row-halves">
            <div class="col" id="project-title">
                <img src="#" alt="">
                <h3>Business</h3>
                <p>
                    Building Responsive and thoughtful websites for small and large businesses.
                </p>
            </div>
            <div class="col" id="project-title">
                <img src="#" alt="">
                <h3>Mobile</h3>
                <p>
                    Fully Responsive, mobile ready design and implementation for all clients.
                </p>
            </div>
        </div>

        <div class="row-halves">
            <div class="col" id="project-title">
                <img src="#" alt="">
                <h3>UX/UI Designs</h3>
                <p>
                    Thoughtful and intuitive users experinces. all of my designs will be guaranteed to my clients.
                </p>
            </div>
            <div class="col" id="project-title">
                <img src="#" alt="">
                <h3>Personal</h3>
                <p>
                    I also build and design for personal projects. no idea is too small. everyone deserve a voice on
                    the web.
                </p>
            </div>
        </div>
    </section>

    <section class="contact" id="contact">
        <h2>Contact</h2>
        <div class="header">
            <h1>Let's work together...</h1>
            <p>How do you take your coffee?</p>
        </div>
        <a href="https://facebook.com"><i class="fad fa-2x fa-facebook"></i></a>
        <a href="https://twitter.com" target="_blank" class="contact-details"><i class=" fad fa-2x fa-twitter"></i></a>
        <a href="https://github.com"><i class="fad fa-2x fa-github"></i></a>
        <a href="https://skype.com"><i class="fad fa-2x fa-skype"></i></a>
        <i class="fas fa-clock"></i>
    </section>

    <footer>
        <p>&copy 2018 | All rights reserved</p>
    </footer>
</body>
</html>
7

You have class fad in you code.
It should be fab.
The above code should be:

<i class=“fab fa-2x fa-facebook”></i>

And similarly for other icons.
Does this help?

1 Like
8

wow, thanks a lot bro, it worked out :joy::joy: God bless you, I was very frustrated. thank you so much for you time, I so much appreciate it.

9

You are always welcome.

Glad that i could help.

1 Like