Tell us what’s happening:
I can’t seem to be able to style the icons i put in from font-awesome. they appear as this block and no styling in css affect it. I did all the instructions in the font-awesome site and got the script they tell you to put in your html but it’s not working.
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>Guitar Center</title>
<link rel="stylesheet" href="styles.css"/>
<script src="https://kit.fontawesome.com/074be7fe90.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<div class="logo">
<img src="https://icon-library.com/images/guitar-icon/guitar-icon-23.jpg" id="header-img">
<h1 id="logo-label">Guitar Center</h1>
</div>
<nav id="nav-bar">
<a class="nav-link" href="">Features</a>
<a class="nav-link" href="">How it works</a>
<a class="nav-link" href="">Pricing</a>
</nav>
</header>
<div class="container">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<h2>Handcrafted, home-made masterpieces</h2>
<input type="email" id="email" placeholder="Enter your email address" name="email"/>
<input type="submit" for="email" id="submit" value="GET STARTED"/>
</form>
<section id="features">
<div class="feat-div">
<i class="fa-solid fa-fire-flame-curved"></i>
</div>
</section>
</div>
</body>
</html>
/* file: styles.css */
*{
border:1px solid black;
}
html{
box-sizing:borderbox;
}
h1{
font-size:3em;
}
h2{
font-size:2em;
}
body{
margin:0;
}
header{
width:100%;
height:10%;
display:flex;
flex-direction:row;
justify-content:space-between;
position:fixed;
top:0;
border-bottom:2px solid red;
background-color:white;
}
#header-img{
width:10%;
}
a{
text-decoration:none;
color:inherit;
}
.logo{
display:flex;
flex-direction:row;
border:none;
padding-left:1%;
}
#header-img{
width:auto;
height:auto;
border:none;
}
#logo-label{
border:none;
margin:auto;
padding-left:1rem;
}
#nav-bar{
width:32.5%;
height:auto;
display:flex;
flex-direction:row;
justify-content:space-around;
padding-right:1%;
flex-wrap:wrap;
border:none;
}
.nav-link{
border:none;
margin:auto;
padding:0 1rem;
}
.container{
width:60%;
height:100%;
margin:9rem auto auto;
}
form{
height:30%;
width:90%;
margin:0 auto;
}
form h2{
text-align:center;
}
form input{
display:block;
}
#email{
margin:2rem auto 0;
width:50%;
height:12%;
}
#submit{
margin:1.5rem auto;
width:25%;
height:12%;
}
section{
border:none;
}
.feat-div{
height:auto;
width:90%;
margin:1em auto 0;
}
i{
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: