如何借助css在html中显示带有文本的图标？

Question

各位，

我想在侧边栏导航中显示带有文本的图标图像，我尝试使用 vertical-align 和 line-height 但没有任何变化，请参阅下面的代码：

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>

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

问候

Answer 1

您可以使用vertical-align和line-height

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

另一种方法：你可以使用no-repeat的background

span.yourtext{
  background: transparent url(images/icons/home.png) no-repeat 
              inherit left center;
  padding-left: 15px
}
<span class="yourtext">
  Home
</span>