想要在导航栏中添加一个图标答案

【问题标题】：Want to add an icon in navbar想要在导航栏中添加一个图标
【发布时间】：2022-01-26 10:58:37
【问题描述】：

我的导航栏应该是这样的：

我想从 font-awesome 添加条形图标，它应该出现在主页链接的左侧。我尝试了很多次，但每次尝试都破坏了导航栏的整个结构以及响应能力。

请提出一些想法，使图标出现在主页链接的左侧，同时保持设计和响应能力不变

body{
    box-sizing: border-box;
    font-family: sans-serif;
    background-color: #091118;
}
nav{
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 0;
    box-shadow: 0 2px 3px 0;       
    width: 100%; 
    height: 50px; 
    border-radius: 15px;
    background-color: #04111ffa;
    overflow: hidden;
}
nav a{
    width: 100%;
    font-size: 15px;
    color: seashell;
    display: inline-block;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    line-height: 50px;
    z-index: 5;
    text-align: center;
}
nav .animation{
    position: absolute;
    height: 50px;
    top: 0;
    z-index: 0;
    width: 100px;
    background-color: rgb(58, 233, 218);
    border-radius: 10%;
    transition: all 0.5s ease 0s;
}
a:nth-child(1){
    left: 100px;
    width: 90px;
}
nav .start-home,a:nth-child(1):hover~.animation {
    width: 90px;
    left: 100px;
}
a:nth-child(2){
    left: 100px;
    width: 100px;
}
nav .start-about,a:nth-child(2):hover~.animation {
    width: 100px;
    left: 190px;
}
a:nth-child(3){
    left: 100px;
    width: 120px;
}
nav .start-contact,a:nth-child(3):hover~.animation {
    width: 100px;
    left: 300px;
}
a:nth-child(4){
    left: 100px;
    width: 170px;
}
nav .start-privacy-policy,a:nth-child(4):hover~.animation {
    width: 170px;
    left: 410px;
}
a:nth-child(5){
    left: 100px;
    width: 100px;
}
nav .start-docs,a:nth-child(5):hover~.animation {
    width: 100px;
    left: 580px;
}
.search-container{
    float: right;
}
input[type=text]{
    padding: 6px;
    margin-top: 13px;
    font-size: 17px;
    border: none;
    border-radius: 15px;
}
.search-container button{
    float: right;
    padding: 6px 10px;
    margin-top: 13px;
    margin-right: 30px;
    font-size: 17px;
    border-radius: 15px;
    background-color: rgb(58, 233, 218);
}
.search-container button:hover{
    background-color: rgb(35, 168, 157);
}

@media screen and (max-width: 948px) {
    nav{
        height: 300px;
    }
   nav a{
       display: flex;
   } 
a:nth-child(1){
    left: 20px;
    width: 60px;
}
nav .start-home,a:nth-child(1):hover~.animation {
    width: 85px;
    left: 0px;
    top: 0;
}
a:nth-child(2){
    left: 20px;
    width: 100px;
}
nav .start-about,a:nth-child(2):hover~.animation {
    width: 92px;
    left: 0;
    top: 50px;
}
a:nth-child(3){
    left: 20px;
    width: 120px;
}
nav .start-contact,a:nth-child(3):hover~.animation {
    width: 110px;
    left: 0px;
    top: 100px;
}
a:nth-child(4){
    left: 20px;
    width: 170px;
}
nav .start-privacy-policy,a:nth-child(4):hover~.animation {
    width: 165px;
    left: 0px;
    top: 150px;
}
a:nth-child(5){
    left: 20px;
    width: 100px;
}
nav .start-docs,a:nth-child(5):hover~.animation {
    left: 0;
    top: 200px;
    width: 85px;
}
.search-container{
    float: left;
    }
}
@media screen and (max-width: 380px) {
span.text{
        display: none;
    }
.search-container{
display: inline-block;
    } 
}

<body>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Privacy Policy</a>
        <a href="#">Docs</a>
        <div class="animation start-home"></div>
        <div class="search-container">
            <form>
                <input type="text" placeholder="Search..." name="search" class="searchbar">
                <button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
            </form>
        </div>
    </nav>
</body>

【问题讨论】：

您是否正确包含了 font awesome？
是的，我试过了，但设计被毁了。我上面粘贴的代码是没有字体的代码真棒。你可以复制粘贴并尝试在导航栏中添加令人敬畏的字体你会发现导航栏的整个设计都被破坏了

标签： html css

【解决方案1】：

试试下面的代码。如需更多了解，请参阅提供的链接 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_v

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #04AA6D;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}
</style>
<body>



<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> 
  <a href="#"><i class="fa fa-fw fa-search"></i> Search</a> 
  <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> 
  
</div>

</body>
</html>

【讨论】：