Product Landing Page - the icons dont show up?

Tell us what’s happening:
hi all, dont know why, the three icons dont show up in the section about how the trombone shop works.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

MY HTML CODE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Original Trumbones</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>

<!--  ==============HEADER============== --> 
    <header id="header">
        <div class="logo">
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trumbones-logo">
        </div>
        <div class="nav-links">
        <ul>
        <li><a id="nav-link1" class="nav-link" href="#Features">Features</a></li>
        <li><a id="nav-link2" class="nav-link" href="#How-it-works">How it works</a></li>
        <li><a id="nav-link3" class="nav-link" href="#Pricing">Pricing</a></li>
        </ul>
        </div>
    </header>


<!--  ==============MAIN============== --> 
    <main>
      <div class="flexcont">
      <section id="Features">
      <h1 class="feature-h1">Handcrafted, home-made masterpieces</h1>
      </section>
      <section class="email-submit">
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Give us your email"> </input>
        <input id="submit" type="submit" value="   GET STARTED"> </input>
      </form>
      </section>

      </br></br></br>

      <section id="features-2">
        <div>
          <div class="grid">
            <div class="icon">
              <i class="fa fa-3x fa-fire"></i>
            </div>
            <div class="desc">
              <h2>Premium Materials</h2>
              <p>
                Our trombones use the shiniest brass which is sourced locally.
                This will increase the longevity of your purchase.
              </p>
            </div>
          </div>

          <div class="grid">
            <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
            <div class="desc">
              <h2>Fast Shipping</h2>
              <p>
                We make sure you recieve your trombone as soon as we have
                finished making it. We also provide free returns if you are not
                satisfied.
              </p>
            </div>
          </div>
          <div class="grid">
            <div class="icon">
              <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
            </div>
            <div class="desc">
              <h2>Quality Assurance</h2>
              <p>
                For every purchase you make, we will ensure there are no damages
                or faults and we will check and test the pitch of your
                instrument.
              </p>
            </div>
          </div>
      </section>



      <section id="How-it-works"></section>
      <h1>HOWITWORKS</h1>
      
     

     


         <iframe
            id="video"
            height="315"
            src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
            frameborder="0"
            allowfullscreen
          ></iframe>

           <section id="Pricing">
             <ul>
               <li>
                 <div>TENOR TROMBONE</div>
                 <p><span>$600</span>
                 Lorem ipsum.
                  Lorem ipsum.
                Lorem ipsum dolor.
            Lorem ipsum.
                 </p>
                 <button>SELECT</button>
                 </li>

                 <li>
                 <div>BASS TROMBONE</div>
                 <p><span>$900</span>
                 Lorem ipsum.
                  Lorem ipsum.
                Lorem ipsum dolor.
            Lorem ipsum.
                 </p>
                 <button>SELECT</button>
                 </li>

                 <li>
                 <div>TENOR TROMBONE</div>
                 <p><span>$600</span>
                 Lorem ipsum.
                  Lorem ipsum.
                Lorem ipsum dolor.
            Lorem ipsum.
                 </p>
                 <button>SELECT</button>
                 </li>
             </ul>
           </section>
      </div>
    </main>



<!--  ==============FOOTER============== -->    
    <footer>
      <div class="footer-links">
      <a href='https://freecodecamp.org'> Privacy</a>
      
        <a href='https://freecodecamp.org'> Terms</a>
      
        <a href='https://freecodecamp.org'> Contact</a>
      </div>
      <p>Copyright 2016, Original Trombones</p>
    </footer>
  </body>
</html>

MY CSS CODE

*{
  background-color:ebecf0;
}

header{
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  border: solid black 1px;
  z-index:3;
 }

.nav-links {
  width: 100%;
}

.nav-links ul {

  display:flex;
  justify-content: space-evenly;
}

.nav-links ul a {
  text-decoration: none;
  color: gray; 
  padding: 5px 10px;
}

.nav-links ul a:hover {
  color: red;
  background-color:black;
}

#header-img{
  width:50%;
  padding-top: 10px;
}


.flexcont{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  margin:20% 0;
}

div{
  border: solid black 1px;
}

.email-submit input{
  display:block;
}

#submit{
  margin:0 25px;
}

ul{
  list-style:none;
}

#features-2{
  display:flex;
}

footer{
  margin-top:auto;
  width:100%;
  height:10%;
  border: solid black 1px;
  z-index:999;
}

.footer-links{
  background-color:red;
  display:flex;
  justify-content:flex-end;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

The icons is from FontAwesome. You have to import to your head section.

Hi,
I’m having the same problem.
I have put the fontawesome link on the head section but the icons don’t show up in the page.

Did you find the solution?
Thanks!

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