Product Landing Page - Build a Product Landing Page

How do i change the icon color?

   ```
original trombone image

Handcrafted, home-made masterpieces

Premium Materials

Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.

``` * { margin: 0; padding: 0; box-sizing: border-box; } #submit{ display:block; margin:0 auto; } #email{ display:block; margin:0 auto; width:50%; padding:5px;

}
.btn{
width:30%;
height:25px;
background-color:#FEA500;
border:none;
color:#0D0902;
font-weight:bold;
}
.fa fa-3xfa-fire{
color: #FEA500
}

/* file: index.html */
<link
 rel="stylesheet"
 href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
 integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
 crossorigin="anonymous"
/>
<div id="page-wrapper">


<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 trombone image"/></div><nav id="nav-bar">
 <ul>
   <li>
 <a href="#features" class="nav-link" id="Tenor_Trombone"></a>
 </li>
 <li>
 <a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
 </li>
 <li>
 <a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
 </li>
 </ul>
 <div class="container"></div>
 <section id="hero">
 <h2>Handcrafted, home-made masterpieces</h2>
 
<form id="form" action="https://www.freecodecamp.com/email-submit">

<input id="email" placeholder="Enter your email address" type="email" name="email"/>
<input id="submit" type="submit" value="GET STARTED" class="btn"/>

</form>
</section>
<div class="container">
  <section id="fast_shipping">
    <div class="icon">
      <i class="fa fa-3x fa-fire"></i>
    <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>
    </section>
<iframe id="video"></iframe>

</div>
 </nav>
 </div></header>
/* file: styles.css */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
#submit{
 display:block;
 margin:0 auto;
}
#email{
  display:block;
 margin:0 auto;
 width:50%;
 padding:5px;
 
}
.btn{
 width:30%;
 height:25px;
 background-color:#FEA500;
 border:none;
 color:#0D0902;
 font-weight:bold;
}
.fa fa-3xfa-fire{
color: #FEA500
}
   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

The Font Awesome icons act just like a font, so you just gotta select it on CSS and use the color property

The issue here seems to happen because you selected the classes incorrectly, it should be:

.fa .fa-3x .fa-fire{
color: #FEA500
}

i tried your solution and it still didn’t work unfortunately

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#submit{
  display:block;
  margin:0 auto;
}
#email{
   display:block;
  margin:0 auto;
  width:50%;
  padding:5px;
  
}
.btn{
  width:30%;
  height:25px;
  background-color:#FEA500;
  border:none;
  color:#0D0902;
  font-weight:bold;
}
.fa .fa-3x .fa-fire{
  color:#FF8C00
}

oh, I just went over your code again and it seems like you forgot to link your external styles.css to your code, can you link it in your <head> and check if that was it?

ok i did that but still nothing maybe i added the link wrong?

<head>
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<div id="page-wrapper">


<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 trombone image"/></div><nav id="nav-bar">
  <ul>
    <li>
  <a href="#features" class="nav-link" id="Tenor_Trombone"></a>
  </li>
  <li>
  <a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
  </li>
  <li>
  <a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
  </li>
  </ul>
  <div class="container"></div>
  <section id="hero">
  <h2>Handcrafted, home-made masterpieces</h2>
  
 <form id="form" action="https://www.freecodecamp.com/email-submit">
 
 <input id="email" placeholder="Enter your email address" type="email" name="email"/>
 <input id="submit" type="submit" value="GET STARTED" class="btn"/>
 
 </form>
 </section>
 <div class="container">
   <section id="fast_shipping">
     <div class="icon">
       <i class="fa fa-3x fa-fire"></i>
     <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>
     </section>
 <iframe id="video"></iframe>

 </div>
  </nav>
  </div></header>

I don’t see the necessity in selecting all of its classes like this, you can just select .fa-fire to change the color of this icon in specific or select .fa to change the color of all Font Awesome icons you include throughout your project.

it worked! thank you! :blush:

this selector doesn’t work for what you are trying to achieve.

it should be like

.fa ,  
.fa-3x , 
.fa-fire{
color : dodgerblue;
}