Tell us what’s happening:
Describe your issue in detail here.
how to insert icon before the text preminum materials?
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Landing Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>
</head>
<body>
<main>
<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="logo"
</div>
<nav id="nav-bar">
<a class="nav-link" href="#Features">Features</a>
<a class="nav-link" href="#How it works">How it works</a>
<a class="nav-link" href="#Pricing">Pricing</a>
</nav>
</header>
</main>
</body>
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form">
<input id="email" name="email" type="email" placeholder="Enter your email here" required>
</input>
<input id="submit" type="submit" value="Get Started"></input>
</form>
<div id="Features"> <i class="fa-duotone fa-fire-flame-curved"></i><strong>Premium Materials</strong>
<div>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</div>
<div id="Features"><strong>Fast Shipping</strong>
<div>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.</div>
<div id="Features"><strong>Quality Assurance</strong>
<div>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.</div>
<video id="video"
controls>
<source src="<iframe width="560" height="315" src="" >
</video>
<i class="far fa-fire"></i>
/* file: styles.css */
html{
box-sizing:border-box;
}
#header-img{
height:40px;
}
#nav-bar{
float:right;
}
.nav-link{
text-decoration:none;
color:black;
margin:5px;
}
.nav-link:hover{
background-color:#99c9ff;
color:white;
}
h2{
text-align:center;
}
#email{
width: 50vw;
margin-left : 25vw;
}
#submit{
background-color:rgb(255, 215, 0);
width: 50vw;
margin-left : 25vw;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Challenge: Build a Product Landing Page
Link to the challenge: