Hello,
https://codepen.io/freeCodeCamp/full/RKRbwL
I would like to begin “product a landing page” HTML CSS project.
Is it possible to get the icons of the page ?
Those icons are part of the FontAwesome library. in orden to use them you need to link the css library first. if you choose “view in editor” on codepen, the first line is the link itself. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>
then, in orden to use an icon you need to call that particular icon.
The full list can be found on Font Awesome
1 Like
I well understood.
Thank you for your help.
1 Like
Hello,
At the begining it worked but now it doesn’t work anymore. I don’t understand why?
this is my full code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>product a landing page</title>
<meta charset="utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: 'Lato', sans-serif;
margin: 0px;
padding: 0px;
position: fixed;
}
#header {
background-color: rgb(187, 197, 223);
display: flex;
justify-content: flex-end;
align-items: center;
height: 100px;
width: 100vw;
}
#div-logo {
display: flex;
justify-content: center;
align-items: center;
max-width: 800px;
}
#img-logo {
width: 80%;
height: auto;
max-height: 75px;
}
#nav-bar {
margin: 0 0 0 auto;
}
#ul-flex {
display: flex;
justify-content: space-around;
width: 40vw;
}
.nav-link {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
font-size: 1.5rem;
}
#hero {
width: 70vw;
background-color: rgb(253, 253, 253);
margin: auto;
text-align: center;
}
h1 {
margin: auto;
padding-top: 39px;
padding-bottom: 30px;
font-size: 1.83rem;
}
#submit {
width: 150px;
height: 30px;
margin: 15px 0px;
border: none;
background-color: rgba(255, 196, 0, 0.897);
font-weight: 800;
font-size: 1.05rem;
}
#email {
width: 275px;
height: 30px;
padding: 0px 0px 0px 5px;
box-sizing: border-box;
}
#how {
width: 70vw;
background-color: rgb(253, 253, 253);
margin: auto;
text-align: center;
}
#feature {
width: 70vw;
background-color: rgb(235, 150, 150);
margin: 50px auto;
text-align: center;
}
#grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
}
.iconp {
width: 100px;
height: 100px;
background-color: violet;
/* display: flex;
justify-content: center;
align-items: center; */
/* font-size: 4rem; */
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.iconf {
width: 100%;
height: 100px;
background-color: rgb(173, 64, 224);
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.dicribep {
width: 300px;
height: 100px;
background-color: rgb(64, 115, 224);
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.dicribef {
width: 300px;
height: 100px;
background-color: rgb(64, 115, 224);
grid-column: 2 / 3;
grid-row: 2 / 3;
}
</style>
</head>
<body>
<section id="header">
<div id="div-logo">
<img
id="img-logo"
id="header-img"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
alt="original trombones logo"
/>
</div>
<nav id="nav-bar">
<ul id="ul-flex">
<li class="nav-link">
<a href="#feature">Feature</a>
</li>
<li class="nav-link">
<a href="#how">How it Works</a>
</li>
<li class="nav-link">
<a href="#pricing">Pricing</a>
</li>
</ul>
</nav>
</section>
<section id="hero">
<h1>Handcrafted, home-made masterpieces</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
id="email"
type="email"
name="your-email"
placeholder="Entrer your email adress"
required
/><br />
<input id="submit" type="submit" value="GET STARTED" class="btn" />
</form>
</section>
<section id="feature">
<div id="grid">
<div class="iconp"><i class="fa-duotone fa-car"></i></div>
<div class="dicribep"></div>
<div class="iconf"><i class="fa-duotone fa-car"></i></div>
<div class="dicribef"></div>
</div>
</section>
<section id="how">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/y8Yv4pnO7qc"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</section>
</body>
</html>
I restarted my computer, paste a link to the library again, it still does not work. 
@karlito, you should not replicate the sample projects. They show one way the project can be done. The instructions say yours should be “functionally similar” and “give it your own personal style”.
Please provide a link to your live code. Screenshots are not helpful.
When you submit your project it has to be a live link so send that so we can see all of your code.
And we don’t want to have to cut/paste it.
And from the little we can tell of your screenshot you have not linked to the font awesome library. You have a link to Google fonts.
Hello,
Ok but when I have a problem I have to be able to fix it so I try to understand why. Also it’s my pleasure to make a similare site. It’s for that I ask some help, i wouldn’t feel well if I didn’t make it.
Yes, sorry yesterday was late, I made a serial ctrl+z, and I didn’t see that awesome link had deasapeared. Now I put it again:
This is the result: some litle squares appears in the div.
I’ m not be able to do that . I 'm not able to host site yet.
You could make a copie / past inside VScode for exemple and launch “Go live” like me. like that you would be able to see if the problem come to my computer or not.
Maybe you have an advice in order to do this quickly.
So waiting for ,I put hereunder the code with the awesome link (inside script elements):
<!DOCTYPE html>
<html lang="en">
<head>
<title>product a landing page</title>
<meta charset="utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/4d720cea97.js"
crossorigin="anonymous"
></script>
<style>
body {
font-family: 'Lato', sans-serif;
margin: 0px;
padding: 0px;
position: fixed;
}
#header {
background-color: rgb(187, 197, 223);
display: flex;
justify-content: flex-end;
align-items: center;
height: 100px;
width: 100vw;
}
#div-logo {
display: flex;
justify-content: center;
align-items: center;
max-width: 800px;
}
#img-logo {
width: 80%;
height: auto;
max-height: 75px;
}
#nav-bar {
margin: 0 0 0 auto;
}
#ul-flex {
display: flex;
justify-content: space-around;
width: 40vw;
}
.nav-link {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
font-size: 1.5rem;
}
#hero {
width: 70vw;
background-color: rgb(253, 253, 253);
margin: auto;
text-align: center;
}
h1 {
margin: auto;
padding-top: 39px;
padding-bottom: 30px;
font-size: 1.83rem;
}
#submit {
width: 150px;
height: 30px;
margin: 15px 0px;
border: none;
background-color: rgba(255, 196, 0, 0.897);
font-weight: 800;
font-size: 1.05rem;
}
#email {
width: 275px;
height: 30px;
padding: 0px 0px 0px 5px;
box-sizing: border-box;
}
#how {
width: 70vw;
background-color: rgb(253, 253, 253);
margin: auto;
text-align: center;
}
#feature {
width: 70vw;
background-color: rgb(235, 150, 150);
margin: 50px auto;
text-align: center;
}
#grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
}
.iconp {
width: 100px;
height: 100px;
background-color: violet;
/* display: flex;
justify-content: center;
align-items: center; */
/* font-size: 4rem; */
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.iconf {
width: 100%;
height: 100px;
background-color: rgb(173, 64, 224);
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.dicribep {
width: 300px;
height: 100px;
background-color: rgb(64, 115, 224);
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.dicribef {
width: 300px;
height: 100px;
background-color: rgb(64, 115, 224);
grid-column: 2 / 3;
grid-row: 2 / 3;
}
</style>
</head>
<body>
<section id="header">
<div id="div-logo">
<img
id="img-logo"
id="header-img"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
alt="original trombones logo"
/>
</div>
<nav id="nav-bar">
<ul id="ul-flex">
<li class="nav-link">
<a href="#feature">Feature</a>
</li>
<li class="nav-link">
<a href="#how">How it Works</a>
</li>
<li class="nav-link">
<a href="#pricing">Pricing</a>
</li>
</ul>
</nav>
</section>
<section id="hero">
<h1>Handcrafted, home-made masterpieces</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
id="email"
type="email"
name="your-email"
placeholder="Entrer your email adress"
required
/><br />
<input id="submit" type="submit" value="GET STARTED" class="btn" />
</form>
</section>
<section id="feature">
<div id="grid">
<div class="iconp"><i class="fa-duotone fa-car"></i></div>
<div class="dicribep"></div>
<div class="iconf"><i class="fa-duotone fa-car"></i></div>
<div class="dicribef"></div>
</div>
</section>
<section id="how">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/y8Yv4pnO7qc"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</section>
</body>
</html>
(It’s a shame that we can’t refer to ligne numbers after pasting the code.)
Once again, in order to submit your projects it has to be a live link to your code. How are you submitting your projects?
When called properly I’m able to get the icon to show on your page. Maybe reference Font Awesome’s doc a little better.
ok I will finish the project then I will send you the CodePen link. Thanks.
today that work well until now…
Thanks again 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.