twitter-bootstrap - 如何更改 Font Awesome 文本字体？

Question

我在按钮中使用了 font-awesome，但是我也希望在 font awesome 按钮中包含文本。字体系列必须是 fontawesome 但这给了我某种我无法修改的衬线字体。



我正在使用的代码

    <div class="  btn-toolbar">
<div class="btn-group" title="vote">
<button class="btn icon-">
<span class="icon-thumbs-up"> vote <span class="icon-thumbs-down">
</button>
<button class="btn icon-heart" title="subscribe to get latest updates"></button>

</div>
  <div class="btn-group">
  <button class="btn icon-edit" title="edit"></button>
  <button class="btn icon-print" title="print"></button>

</div>
    <div class="btn-group">
  <button class="btn icon-facebook" title="share on facebook"></button>
  <button class="btn icon-twitter" title="share on twitter"></button>
  <button class="btn icon-google-plus" title="share on google+"></button>


</div>
</div>

Answer 1

您不应该直接在按钮上使用图标，而是将它们添加到其内容中。此外，您还有非常严重的语法错误。 <span>不是自闭元素，需要做</span>每次使用它。文档建议使用 <i></i>取而代之，但它违反了一些开发者的感受。无论如何，让我们在这个例子中使用它(跨度也可以)。

当您需要一个带有图标的按钮时，您可以:

<button class="btn" title="share on facebook"><i class="icon-facebook"></i></button>

当您需要图标旁边的文字时，只需简单地附加它 (注意图标后面的空格) .

<button class="btn"><i class="icon-thumbs-up"></i> Like</button>

您也可以使用多个图标。

<button class="btn"><i class="icon-thumbs-up"></i> Vote <i class="icon-thumbs-down"></i></button>

更多实验，看这个 fiddle : http://jsfiddle.net/Frizi/h69je/2/