html - CSS - 文本上的图标

Question

我有这个 html 来显示我的导航:

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav mainMenu">
        <li><a href="#"><span class="glyphicon glyphicon-dashboard"></span><span class="menuText">Menu1</span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-home"></span><span class="menuText">Menu2</span></a></li>
            ...
    </ul>           
</div>

我的导航是这样的:

现在我想在文本上添加图标，但不知怎么的，这并不像我想的那么简单。有人知道如何以简单的方式做到这一点吗？

Answer 1

将 display:block 添加到您的 span 中，以便它们换行。

例如:

.glyphicon {
  display: block;
}

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav mainMenu">
    <li><a href="#"><span class="glyphicon glyphicon-dashboard">a</span><span class="menuText">Menu1</span></a></li>
    <li><a href="#"><span class="glyphicon glyphicon-home">b</span><span class="menuText">Menu2</span></a></li>
    ...
  </ul>
</div>

Ref