""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE"" ""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE"" ""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE"""""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE""""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE""""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE""""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE""""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE""""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE""""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE""""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE""""THIS HAS BEEN ADDED BECAUSE TOO MUCH CODE""
Hello I'm triyng to add some brand icons to the contacts section but a small square with the brand unicode appears instead. I have linked the all.css to the head but it's not working. Here's the not working code:
<li><i class="fab fa-facebook-square"></i>Facebook</li>
.fab {
font-family: "Font Awesome 5 Brands";
}
.fa-facebook-square::before {
content: "\f082";
}
Here's the full page code:
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code_Farmer94 Personal Portfolio</title>
</head>
<!-- HEAD END-->
<body>
<!-- NAVBAR-->
<header>
<nav id="navbar">
<ul id="navbar-list">
<li><a href="#welcome">Home</a>
</li>
<li><a href="#projects-container">Work</a>
</li>
<li><a href="#contacts-link">Contact</a>
</li>
</ul>
<p id="nav-p">Powered By Code_Farmer94</p>
</nav>
</header>
<!--END NAVBAR-->
<!-- HOME-->
<main>
<section id="welcome">
<div class="scrolling-image-container">
<div class="scrolling-image"></div>
</div>
<img src="https://i.ibb.co/RjnHZFX/rocket-ship-png-0-preview-rev-1.png" id="rocket">
<h1 id="h1-rocket">Welcome to my first Personal Portfolio!</h1>
</section>
<!--HOME END-->
<!-- WORK-->
<section id="projects">
<h1 id="h1-projects">These are some of my Projects!</h1>
<section id="projects-container">
<div id="img-container"><img src="https://i.ibb.co/QbB9wgj/skyline.png"
id="project-img"><p id="img-caption">CSS Skyline</p></div>
<div id="img-container"> <img src="https://i.ibb.co/qjckv88/Minervini-Project.png" id="project-img"><p id="img-caption">Tribute Page</p></div>
<div id="img-container"> <img src="https://i.ibb.co/xH6RZc7/Samsung-Project.png" id="project-img"><p id="img-caption">Product Landing Page</p></div>
<div id="img-container"> <img src="https://i.ibb.co/cX5RVgf/technicalpage.png" id="project-img"><p id="img-caption">Technical Page</p></div>
</section>
<!--END WORK-->
<!-- CONTACTS -->
<section id="contacts-quote">
<h1 id="h1-contacts"><i>Let's work together...</i></h1><p id="p-contacts">“Experience is the name everyone gives to their mistakes.”<br>-<i>Oscar Wilde</i></p>
<div id="contacts-link">
<ul>
<li><i class="fab fa-facebook-square"></i>Facebook</li>
<li>Github</li>
<li>LinkedIn</li>
<li>Send Email</li>
<li>Call Me</ul></section>
<!-- END CONTACTS-->
<footer>
<p>This is my final project for the responsive<br><span> Web Design Certification!</span>
</footer>
</section>
</main>
</body>
</html>
* {
font-family: sans-serif;
margin: 0;
padding: 0;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
}
#welcome {
background: black;
}
header {
position: sticky;
display: block;
top: 0;
z-index: 1;
}
#navbar {
height: 50px;
margin: 0;
background: linear-gradient(0deg,
black,
purple);
color: white;
display: flex;
flex-direction: row-reverse;
font-size: 20px;
justify-content: space-evenly;
gap: 50px;
font-weight: 900;
}
#navbar-list {
right:200px;
display: flex;
gap: 15px;
list-style: none;
align-items: center;
}
#nav-p {
display: block;
margin: auto 0;
}
.scrolling-image {
background: url("https://c4.wallpaperflare.com/wallpaper/546/187/719/stunning-4k-stars- dark-space-milky-way-galaxy-wallpaper-preview.jpg") ;
height: 7330px;
animation: slide 200s linear infinite;
width: 12944px;
border: 1px solid rgb(59, 49, 49);
display: block;
margin: auto;
}
.scrolling-image-container {
height: 100vh;
overflow: hidden;
}
@keyframes slide {
0% {
transform: translateX(0) translateY(-5360px)
}
100% {
transform: translateX(-3400px)translateY(0)
}
}
#rocket {
position: absolute;
top: 95%;
left: 0%;
width: 150px;
animation: slide2 4s ease-in infinite;
animation-direction: normal;
}
@keyframes slide2 {
0% {
transform: translateX(-200px) translateY(0)
rotate(20deg)
}
100% {
transform:
translateX(1400px)
translateY(-800px)
}
}
#h1-rocket {
color: white;
position: absolute;
top:250px;
text-align: center;
width: 100%;
font-size: 30px;
font-weight: 900;
text-decoration: underline;
text-decoration-thickness: 5px;
}
#projects {
background: linear-gradient(0deg,
rgb(18, 18, 154) 0%,
purple,
black);
color: white;
text-align: center;
border-top: 2px solid white;
padding-bottom: 25px;
border-bottom: 2px solid white;
}
#h1-projects {
font-size: 30px;
font-weight: 900;
margin: 80px;
}
#projects-container {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 50px;
margin-top: 50px;
}
#project-img {
width: 45%;
min-width: 500px;
margin: 0 auto;
border-radius: 15px;
border: 5px solid rgb(123, 9, 97);
}
#project-img:hover {
transform: scale(1.05)
}
#img-caption {
border-bottom: 2px solid white;
width: 500px;
font-weight: 900;
font-size: 22px;
margin: 50 auto;
margin-top: 5px;
background: rgb(60, 60, 99);
border-radius: 5px;
}
#h1-contacts{
font-size: 44px;
font-weight: 900;
color: white;
padding-top: 125px;
border-top: 2px solid white;
margin-top: 50px;
}
#contacts-quote {
margin: 125px 0;
}
#p-contacts {
font-size: 14px;
font-weight: normal;
padding-top: 20px;
}
#contacts-link {
margin: 0 auto;
margin-top: 70px;
display: block;
}
ul li {
padding: 20px;
list-style-type: none;
display: inline;
font-size: 20px;
gap: 30px;
flex-wrap:wrap;
}
footer {
border-top: 2px solid white;
padding: 40px;
}
footer p {
font-size: 15px;
font-weight: normal;
}
span {
font-weight: 900;
}
.fab {
font-family: "Font Awesome 5 Brands";
}
.fa-facebook-square::before {
content: "\f082";
}