侧边栏列表中的图标不可见 li class="nav-item"
Icons are not visible in sidebar's list li class="nav-item"
我需要将图标放在侧边菜单的文本之前。我试了很多方法都不管用。
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul style="background-color:purple; padding-left: 20px;" class="navbar-nav mr-auto sidenav" id="navAccordion">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Property <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
我尝试了以下组合
<li class="nav-item">
<a href="#">
<li><a href="#">Envelope icon: <span class="glyphicon glyphicon-envelope"></span></a></li>
</a>
</li>
<li class="nav-item">
<p><a href="#"> <i class="fa fa-home fa-fw"> </i> Home </a></p>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> <i class="fa fa-home fa-fw"> </i> Home <span class="sr-only">(current)</span></a>
</li>
这是我的输出屏幕,其中没有可用图标
我看到您正在尝试使用 FontAwesome 图标。您是否在 <head>
中引用了适当的 fontawesome.css
?
即;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
也许这样的事情应该有所帮助?让我知道。
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul style="background-color:purple; padding-left: 20px;" class="navbar-nav mr-auto sidenav" id="navAccordion">
<li class="nav-item">
<div class="logo">
<img style="width:25px; height:25px" src="https://png.pngtree.com/png-clipart/20191120/original/pngtree-outline-home-icon-and-symbol-isolated-png-image_5045551.jpg">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<div class="logo">
<img style="width:25px; height:25px" src="https://img.icons8.com/all/500/property.png">
</div>
<a class="nav-link" href="#">Property <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
编辑:刚看到有人回答了你的问题。很高兴你得到答案!
我需要将图标放在侧边菜单的文本之前。我试了很多方法都不管用。
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul style="background-color:purple; padding-left: 20px;" class="navbar-nav mr-auto sidenav" id="navAccordion">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Property <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
我尝试了以下组合
<li class="nav-item">
<a href="#">
<li><a href="#">Envelope icon: <span class="glyphicon glyphicon-envelope"></span></a></li>
</a>
</li>
<li class="nav-item">
<p><a href="#"> <i class="fa fa-home fa-fw"> </i> Home </a></p>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> <i class="fa fa-home fa-fw"> </i> Home <span class="sr-only">(current)</span></a>
</li>
这是我的输出屏幕,其中没有可用图标
我看到您正在尝试使用 FontAwesome 图标。您是否在 <head>
中引用了适当的 fontawesome.css
?
即;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
也许这样的事情应该有所帮助?让我知道。
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul style="background-color:purple; padding-left: 20px;" class="navbar-nav mr-auto sidenav" id="navAccordion">
<li class="nav-item">
<div class="logo">
<img style="width:25px; height:25px" src="https://png.pngtree.com/png-clipart/20191120/original/pngtree-outline-home-icon-and-symbol-isolated-png-image_5045551.jpg">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<div class="logo">
<img style="width:25px; height:25px" src="https://img.icons8.com/all/500/property.png">
</div>
<a class="nav-link" href="#">Property <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
编辑:刚看到有人回答了你的问题。很高兴你得到答案!