Bootstrap 3 中的 Glyphicons Pro / 图标未与文本对齐答案

【问题标题】：Glyphicons Pro in Bootsrap 3 / Icon not aligned with TextBootstrap 3 中的 Glyphicons Pro / 图标未与文本对齐
【发布时间】：2017-05-19 22:22:26
【问题描述】：

我刚刚将 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>

【问题讨论】：

你能粘贴你的代码吗
示例 - <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphicon-print"></span> Print </a>
上传你的css部分
你正在使用字形图标和字形图标jsfiddle.net/MadhawaMB/bb61c412/462
css 部分是默认引导程序。我正在使用 glyphicons (pro version) 和 glyphcion (default bootstrap - halflings) 工作正常.. 但不是中的对齐

标签： twitter-bootstrap glyphicons

【解决方案1】：

使用字形图标将文本移出<span>，并将vertical-align:middle应用于

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

【讨论】：

我的文字不在跨度内；）
它不会对齐文本

【解决方案2】：

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

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

【讨论】：