So I’ve been trying to render a startup website (not an actual startup) and I’m currently adding 3 icons in a row in about the center of the page after the "about" div. The main problem here is that I’m not able to see the last font awesome icon I want to insert. The same problem happened with the middle icon, but I just selected another icon instead and thought that it might be some external problem. But for the last icon it is not working. There is a little bit of "dirty coding" in that container. But for now someone please fix my icon problem.
The icon in "message" div is not showing up.
However the devtools of my browser suggest that the element exists and only a white box appears.
body{
margin: 0;
}
nav{
color: antiquewhite;
position: sticky;
right: 0;
}
h1{
padding: 10px 20px;
}
ul{
list-style: none;
}
li{
padding: 10px;
display: inline-block;
}
a{
text-decoration: none;
color: antiquewhite;
}
a:hover{
color: #FFD39A;
}
.title{
font-family: "Rubik", sans-serif;
width: 40%;
margin: 150px 100px;
float: left;
}
i{
padding: 30px;
}
.icons{
position: relative;
top: 100px;
}
.tbc{
position: relative;
left: 83px;
margin: -71px;
margin-top: 6px;
}
.middle{
text-align: center;
color: white;
margin-top: 200px;
margin-bottom: 100px;
padding: 50px 100px;
border-radius: 25px;
}
.about{
padding-bottom: 40px;
}
.middle2{
text-align: center;
margin-bottom: 100px;
}
.checkdiv{
margin-right: 800px;
text-align: center;
}
.check{
margin-left: 50px;
}
.para{
width: 70%;
text-align: center;
margin-left: 90px;
}
.bullseyediv{
text-align: center;
display: inline-block;
width: 33%;
margin-left: 82px;
margin-top: -172px;
position: relative;
bottom: 39px;
}
.message{
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<!-- META TAGS -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/a2efd1781b.js" crossorigin="anonymous"></script>
<!-- FONTS -->
<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=Rubik:wght@500&display=swap" rel="stylesheet">
<!-- CSS LINK -->
<link rel="stylesheet" href="css/style.css">
<title>Stencil.io</title>
</head>
<body>
<nav class="navbar navbar-collapse-md bg-dark">
<h1>stencil.io</h1>
<div class="navbar-toggler">
<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.quora.com">Quora</a></li>
<li><a href="https://youtube.com">Youtube</a></li>
</ul>
</div>
</nav>
<header>
<h1 class="title">All your social media at one place.</h1>
<div class="icons container-fluid">
<i class="snapchat fa-brands fa-square-snapchat fa-7x"></i>
<i class=" instagram fa-brands fa-instagram fa-7x"></i>
<i class=" twitter fa-brands fa-twitter fa-7x"></i>
<div class="tbc container-fluid">
<i class="linkedin fa-brands fa-linkedin fa-7x"></i>
<i class="fa-brands fa-square-facebook fa-7x"></i>
</div>
</div>
</header>
<br><br><br><br>
<div class="middle container-md container-fluid bg-dark">
<h3 class="about">
About Stencil
</h3>
<p class="aboutpara">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur sapiente quis commodi sint eos consectetur veniam doloremque esse libero! Quibusdam exercitationem quos possimus, ab facilis nobis quia vitae culpa error doloribus, aut tenetur a. Cum rerum dignissimos aliquam repellat cupiditate sunt enim eveniet asperiores. Itaque suscipit quod incidunt accusamus fugiat!
</p>
</div>
<div class="middle2 container-fluid">
<div class="checkdiv">
<i class="check fa-solid fa-circle-check fa-4x"></i><br>
<p class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit, minima.</p>
</div>
<div class="bullseyediv">
<i class="fa-solid fa-crosshairs fa-4x"></i>
<p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto repellat vitae expedita accusamus asperiores?</p>
</div>
<div class="message">
<i class="fa fa-solid fa-messages-question fa-4x"></i>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, laudantium necessitatibus eveniet aliquam eum voluptatum?</p>
</div>
</div>
</body>
</html>
2
Answers
If you go to your fontawesome account and in kits tab click on your project and settings. Check if you are in Latest 6.X, if no, put in
In not using the kit, this is an easy way using Font Awesome 6