html - 如何借助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

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