Font Awesome Icons not visible

HTML-CSS
1

Tell us what’s happening:

Why can’t I see the GitHub and LinkedIn icons?

https://codepen.io/Shukri-Isse/pen/QwWzePr

Your code so far

<!-- file: index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
  <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav id="navbar">
      <ul>
        <li><a href="#welcome-section">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <section id="welcome-section">
      <h1>Hi, I'm Shukri</h1>
      <p>A software developer</p>
    </section>
    <section id="projects">
      <h2 class="projects-header">These are some of my projects</h2>
      <div class="card-container">
        <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page">
        <div class="project-tile">
          <img class="image"
            src="https://i.imgur.com/MVp8vpc.png"
            alt="Tech Doc Page"
          >
          <p class="card-footer">Tech Documentation Page</p>
        </div>
        </a>
        <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form">
        <div class="project-tile">
          <img class="image"
            src="https://i.imgur.com/xQAdSAk.png"
            alt="Survey Form"
          >
          <p class="card-footer">Survey Form</p>
        </div>
        </a>
        <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-91">
        <div class="project-tile">
          <img class="image"
            src="https://i.imgur.com/4lRD5Sc.png"
            alt="Cafe Menu"
          >
          <p class="card-footer">Cafe Menu</p>
        </div>
        </a>
      </div>
    </section>
    <section id="contact">
      <div class="social-icons">
          <a href="https://www.github.com/free-code-camp/">
            <i class="icon fa-brands fa-github"></i>
          </a>
          <a href="https://www.linkedin.com/school/free-code-camp/">
            <i class="icon fab fa-linkedin-in" style="color: red"></i>
          </a>
      </div>
      </div>
    </section>
  </body>
</html>

```css
/* file: styles.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* scroll-behavior: smooth; */
  font-size: 14px;
  min-height: 100vh;
  height: 100%;
}

body {
  /* min-height: calc(100vh - 50px); */
  height: 100%;
  /* background-color: rgb(32, 32, 71); */
  /* background-color: rgb(132, 167, 219); */

}

#navbar {
  box-shadow: 3px 3px 3px 3px rgb(0,0,0, 0.1);
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}


#navbar ul {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#navbar li {
  height: 50px;
 }

#navbar a {
  margin-right: 1em;
  height: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: rgb(32, 32, 71);
}

#navbar a:hover {
  cursor: pointer;
  background-color: rgb(214, 211, 211, 0.7);
}

/* header {
  position: sticky;
  top: 0;
} */

#welcome-section h1 {
  margin: 0;
  padding: 0;
  color: #FFF;
  font-weight: bold;
  font-size: clamp(25px, 3.5vw, 40px);
  text-align: center;
  text-shadow: 1px 1px 2px rgb(100, 99, 99);
}

#welcome-section p {
  color: #FFF;
  font-style: italic;
  text-align: center;
  text-shadow: 1px 1px 2px rgb(100, 99, 99);
}

#welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: calc(100vh -  53px);
  top: 50%;
  background-color: rgb(132, 167, 219);
}

.project-tile img {
  width: 100%;
  height: auto;
  /* object-fit: cover;*/
  display: block;
}

#projects {
  background-color: gray;
}

.projects-header {
  padding-top: 20px;
  text-align: center;
  font-size: 200%;
}

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.project-tile {
  width: 300px;
  border: 1px solid rgba(0,0,0,0.1);
  margin: 20px;
  /* display: flex;
  flex-wrap: wrap; */
}

.card-footer {
  background-color: #333;
  color: #fff;
  text-align: center;
}

#contact {
  background-color: rgb(132, 167, 219);
}

.social-icons {
  color: white;
}


### Your browser information:

User Agent is: <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15</code>

### Challenge Information:
Personal Portfolio Webpage - Build a Personal Portfolio Webpage
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage
2

You have to add the icon library. There are multiple ways of adding it, but using a CDN link is the easiest. You can do so on Codepen using the setting, or just add the CDN link yourself to the HTML in the editor.

1 Like
3

Check out this article:

https://www.freecodecamp.org/news/how-to-use-font-awesome-v5-7-2-with-html/

Like other CDNs, you need to add a <link> element to the <head>. For Font Awesome 5.7.2, it’ll look something like this:

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

and:
https://fontawesome.com/start

Setup Font Awesome
After creating a Kit, copy your Kit’s unique code into the of your page.

1 Like