Twitter bootstrap 如何更改字体文字字体？

我在按钮中使用了font Awest，但是我也希望在font Awest按钮中包含文本。字体家族必须是真棒的，但这给了我一些我无法修改的衬线字体

我正在使用的代码

    <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>

投票

已修复-使用以下代码覆盖

<span class="icon-thumbs-up"> <span style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; font-size:12px;" >vote</span> <span class="icon-thumbs-down">

投票

您不应该直接在按钮上使用图标，而是将它们添加到其内容中。此外，您还有非常严重的语法错误<代码>不是自动关闭元素，每次使用时都需要执行

。文档建议改为使用

，但这违反了一些开发人员的感受。无论如何，让我们在本例中使用它（spans也可以使用）

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

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

当您需要图标旁边的文本时，只需将其添加到（注意图标后面的空格）

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

Like

您也可以使用多个图标

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

投票

---

关于更多的实验，请看这个提琴：

下面的HTML和CSS为我覆盖了字体awesome v5.0+

<i class="fas fa-phone"><span class="fa-icon-innter-text">&nbsp;TEXT</span></i>

.fa-icon-innter-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

文本
.fa图标输入文本{
字体系列：“开放式Sans”，无衬线；
字号：1rem；
字体大小：400；
线高：1.5；
保证金：0；
文本对齐：左对齐；
}

我用以下命令更改了CSS文件中的默认文本字体：

font-family: 'Font Awesome\ 5 Free', sans-serif;

---

这可能是最佳实践，但问题会导致更干净的代码，因此它应该得到正确的答案。