Tell us what’s happening:
Describe your issue in detail here.
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>Magazine</title>
<link
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<section class="heading">
<header class="hero">
<img
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
alt="freecodecamp logo"
loading="lazy"
class="hero-img"
width="400"
/>
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
<p class="hero-subtitle">
Our efforts to restructure our curriculum with a more project-based
focus
</p>
</header>
<div class="author">
<p class="author-name">
By
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
>freeCodeCamp</a
>
</p>
<p class="publish-date">March 7, 2019</p>
</div>
<!-- User Editable Region -->
<div class="social-icons">
<a <i class="fab fa-facebook-f"></i> href="https://www.facebook.com/freecodecamp/">
</a>
<a <i fab fa-twitter"></i> href="https://twitter.com/freecodecamp/"><i>
</a>
<a <i fab fa-instagram"></i> href="https://instagram.com/freecodecamp">
</a>
<a <i fab fa-linked-in"></i> href="https://www.linkedin.com/school/free-code-camp/">
</a>
<a <i fab fa-youtube"></i> href="https://www.youtube.com/freecodecamp">
</a>
</div>
<!-- User Editable Region -->
</section>
</main>
</body>
</html>
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/112.0
Challenge: Learn CSS Grid by Building a Magazine - Step 10
Link to the challenge:
Look at your first i element. Notice how you added a class for the facebook? Now look at every i element after that. You didnt add class for any of those as the instructions say
- Your second
i element should have the class fab fa-twitter
- Your third
i element should have the class fab fa-instagram
- Your fourth
i element should have the class fab fa-linkedin-in
- Your fifth
i element should have the class fab fa-youtube
Hi everyone!
over and hour I have been trying to fix icon classes. please can anyone help me out?
my code below:
<div class="social-icons">
<a <i class="fab fa-facebook-f"></i> href="https://www.facebook.com/freecodecamp/">
</a>
<a <i fab fa-twitter"></i> href="https://twitter.com/freecodecamp/"><i>
</a>
<a <i fab fa-instagram"></i> href="https://instagram.com/freecodecamp">
</a>
<a <i fab fa-linked-in"></i> href="https://www.linkedin.com/school/free-code-camp/">
</a>
<a <i fab fa-youtube"></i> href="https://www.youtube.com/freecodecamp">
</a>
</div>
Look at my response. you have not added the word “class” to all your other i elements. You did it for the first one, but you did not do it for the rest.
You have added only a few i elements in the opening <a> tags. This is not what you are supposed to do. Your task is to add i elements within anchor elements, in other words, between the opening <a href="url"> and closing </a> tags.
Restart step.
I just did it but could not pass.
my code:
<div class="social-icons">
<a <i class="fab fa-facebook-f"></i> href="https://www.facebook.com/freecodecamp/">
</a>
<a <i class="fab fa-twitter"></i> href="https://twitter.com/freecodecamp/"><i>
</a>
<a <i class="fab fa-instagram"></i> href="https://instagram.com/freecodecamp">
</a>
<a <i class="fab fa-linked-in"></i> href="https://www.linkedin.com/school/free-code-camp/">
</a>
<a <i class="fab fa-youtube"></i> href="https://www.youtube.com/freecodecamp">
</a>
</div>
Now, take a look at what Dobar just sent. He has addressed the other error
I tried putting as directed but am yet to pass.
my new code below:
<div class="social-icons">
<a href="https://www.facebook.com/freecodecamp/"><i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/freecodecamp/"><i><i class="fab fa-twitter"></i>
</a>
<a href="https://instagram.com/freecodecamp"><i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/school/free-code-camp/"><i class="fab fa-linkedin"></i>
</a>
<a href="https://www.youtube.com/freecodecamp"><i class="fab fa-youtube"></i>
</a>
</div>
Look at this line
<a href="https://twitter.com/freecodecamp/"><i><i class="fab fa-twitter"></i>
You also need to look at your class for the linkedin. You are missing something in the class name
You have a surplus here: <i> at the beginning.
The following line has the incomplete class name:
<i class="fab fa-linkedin"></i>
if I write it in the way linked-in the icon will not show
class name for linkedin needs to be “fab fa-linkedin-in”
challenge passes for me
same time Dobar lol
We always getting to it at the same time XD
1 + 1 makes 4 
Always at the service.
1 Like
Am trying to write the whole thing over again
1 Like
No worries, you can continue to use this post if you still run into any issues after you submit the the code again
Mod edit: Removed Solution
I have removed your answer
It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.
We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.
