Learn CSS Grid by Building a Magazine -- STEP 10 -- Why the "fab"

Hi,

Would someone please explain to me the meaning of all the fab-fa I have to add in the code? I look for an explanation online, but I only got editors and other things, but not a “why” explanation. Why do I need to do it? Look at this : class="fab fa-facebook-f" there are five more in the code below.

Thank you.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <section class="heading">
        <header class="hero">
          <img
            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
            alt="freecodecamp logo"
            loading="lazy"
            class="hero-img"
            width="400"
          />
          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
          <p class="hero-subtitle">
            Our efforts to restructure our curriculum with a more project-based
            focus
          </p>
        </header>
        <div class="author">
          <p class="author-name">
            By
            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
              >freeCodeCamp</a
            >
          </p>
          <p class="publish-date">March 7, 2019</p>
        </div>
        <div class="social-icons">
          <a href="https://www.facebook.com/freecodecamp/"><i class="fab fa-facebook-f"></i>
          </a>
          <a href="https://twitter.com/freecodecamp/"><i class="fab fa-twitter"></i>
          </a>
          <a href="https://instagram.com/freecodecamp"><i class="fab fa-instagram"></i>
          </a>
          <a href="https://www.linkedin.com/school/free-code-camp/"><i class="fab fa-linkedin-in"></i>
          </a>
          <a href="https://www.youtube.com/freecodecamp"><i class="fab fa-youtube"></i>
          </a>
        </div>
      </section>
    </main>
  </body>
</html>

Those classes are for adding the Font Awesome icons that are going to be used for those links.

Then, why do they call them “fab”? At first, I thought the “fab” meant facebook. Plus there are two "fa"s: “fab” and “fa”

I don’t know. I’m not that familiar with Font Awesome so I don’t know all of the logic for why they named their classes the way they did. All I can tell you is that that’s how Font Awesome works (at least for the version of FA being used in this course).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.