如何在css的帮助下用html显示带有文本的图标？

亲爱的大家，

我想在侧栏导航中显示带有文本的图标图像，我尝试使用垂直对齐和线条高度，但没有更改，请参见下面的代码：

HTML:

<div id="sidebar-wrapper">
  <ul class="sidebar-nav" id="MainMenu">
    <li class="sidebar-brand"><a href="#">ABC</a></li>
    <li><a href="#"><img src="images/icons/home.png">HOME</a></li>
  </ul>
</div>

任何帮助或指导都将不胜感激

---

关于

您可以使用

垂直对齐

和

行高

<p style = 'line-height: 20px'>
  <img src = 'images/icons/home.png' style='vertical-align: middle' /> HOME
</p>

---

您可以使用

伪元素

将图标与文本一起放置。此外，我建议您选择

FontAwesome

Library来选择图标（它是基于向量的，您可以随时更改字体图标）。看看我用Library制作的演示。选中

CSS代码是

ul{list-style-type:none;}
li{position:relative;}
li:not(.sidebar-brand):before{content:"\f015";position:absolute; left:-20px;font-family: FontAwesome;color:red;}

发布你的CSS，一个可能会有所帮助。

ul{list-style-type:none;}
li{position:relative;}
li:not(.sidebar-brand):before{content:"\f015";position:absolute; left:-20px;font-family: FontAwesome;color:red;}