如何在带有 Bootstrap 的按钮中使用 Glyphicons？答案

【问题标题】：How can I use Glyphicons in a button with Bootstrap?如何在带有 Bootstrap 的按钮中使用 Glyphicons？
【发布时间】：2016-02-14 00:09:42
【问题描述】：

我正在尝试使用 Bootstrap 执行典型的 +/- 按钮，但我想使用 Glyphicons 而不是 + 或 - 字符。

我知道official documentation 说：

不要与其他成分混合

图标类不能直接与其他组件组合。它们不应与同一元素上的其他类一起使用。相反，添加一个嵌套的<span> 并将图标类应用于<span>。

但我认为这应该是一种将Glyphicons 放在按钮上的方法，但我无法将其取出。

如果没有，有什么方法可以实现相同的行为吗？

Here 是我的代码 sn-p。

提前致谢！

【问题讨论】：

像文档告诉你的那样，简单地将 span 元素插入按钮有什么问题？

标签： html twitter-bootstrap

【解决方案1】：

只需在您的button-container 中的某处添加span-container。

这样的……

<button type="button" class="btn btn-primary btn-lg"> 
  <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>

【讨论】：

非常感谢！这正是我所需要的:)。我虽然 Button groups 应该是最好的选择，但现在我可以看到我错了。再次，非常感谢你:)

【解决方案2】：

<button class="btn btn-info" type="button"> <span class="glyphicon glyphicon-refresh"></span> </button>

希望这会有所帮助:)

【讨论】：