所以我一直在尝试呈现一个启动网站(而不是一个真正的启动网站(，我目前正在页面中心添加3个图标；关于"；这里的主要问题是我看不到我想插入的最后一个字体很棒的图标。中间的图标也出现了同样的问题，但我只是选择了另一个图标，并认为这可能是一些外部问题。但对于最后一个图标来说，它不起作用。有一点点"；脏编码"；在那个集装箱里。但现在有人请解决我的图标问题。"；消息"；div没有显示。然而，我的浏览器的开发工具表明该元素存在，并且只显示了一个白框。
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/bootstrap@5.2.0/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/bootstrap@5.2.0/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>如果您转到您的fontwo敬畏帐户并在工具包选项卡中单击您的项目和设置。检查您是否在最新6.X中，如果没有，请输入
在不使用工具包的情况下，这是使用Font Awesome 6 的一种简单方法
<!-- font awesome 6 all -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- far = font awesome regular (free) -->
<i class="far fa-user fa-4x"></i>
<span style="padding-right: 20px"></span>
<!-- fas = font awesome solid (free) -->
<i class="fas fa-user fa-4x"></i>
<span style="padding-right: 20px"></span>
<!-- fab = font awesome brands (free) -->
<i class="fab fa-twitter fa-4x"></i>