Bootsrap 3中的Glyphicons Pro /图标未与文本对齐

Question

我刚将Glyphicons pro字体包含在我的Bootstrap项目中。显示图标但图标对齐例如在按钮中不正确。

如果像半身人一样使用Glyphicons Pro Set，我需要更改什么？

<button type="button" class="btn btn-primary">
   <span class="glyphicons glyphicons-lightbulb"></span> Button 1
</button>

<button type="button" class="btn btn-primary">
   <span class="glyphicon glyphicon-bell"></span> Button 2
</button>

Answer 1

使用glyphicon将文本移出<span>并将vertical-align:middle应用于

<button type="button" class="btn btn-primary">
<span class="glyphicons glyphicons-lightbulb"  style="vertical-align:middle"></span> Button 1
</button>

Answer 2

通过在css语句中添加“！important”来覆盖glyphicons pro的标准垂直对齐（“top”）：

.glyphicons {
    vertical-align:middle !important;
}