twitter-bootstrap 如何更改 font-awesome 文本字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17006197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the font-awesome text font?
提问by steve0nz
I am using font-awesome in a button, however I also want to have text within the font awesome button. the Font family has to be fontawesome but that gives me some kind of serif font which I cannot modify.
我在按钮中使用 font-awesome，但是我也希望在 font awesome 按钮中包含文本。字体系列必须字体很棒，但这给了我某种我无法修改的衬线字体。
Code I am using
我正在使用的代码
<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>
回答by Frizi
You should not use icons directly on button, but instead add them to its content. Moreover you have very serious syntax errors. <span>is not self closing element, you need to do </span>every time you use it. Documentation suggests using <i></i>instead, but it violates the feelings of some developers. Anyway, let use it in this example (spans works too).
您不应直接在按钮上使用图标，而应将它们添加到其内容中。此外，您有非常严重的语法错误。<span>不是自闭元素，</span>每次使用时都需要这样做。文档建议<i></i>改用，但它违反了一些开发人员的感受。无论如何，让我们在这个例子中使用它（跨度也可以）。
When you need a button with icon, you do:
当您需要带有图标的按钮时，您可以：
<button class="btn" title="share on facebook"><i class="icon-facebook"></i></button>
When you need a text next to the icon, just simply append it (notice the space after icon).
当您需要图标旁边的文本时，只需简单地附加它（注意图标后面的空格）。
<button class="btn"><i class="icon-thumbs-up"></i> Like</button>
You can use multiple icons as well.
您也可以使用多个图标。
<button class="btn"><i class="icon-thumbs-up"></i> Vote <i class="icon-thumbs-down"></i></button>
For more experiments, look at this fiddle: http://jsfiddle.net/Frizi/h69je/2/
更多实验，看看这个小提琴：http: //jsfiddle.net/Frizi/h69je/2/
回答by steve0nz
Fixed - used the following code to overwrite
已修复 - 使用以下代码覆盖
<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">
回答by Amature
The following HTML and CSS worked for me to overwrite the font-awesome v5.0+
下面的 HTML 和 CSS 为我覆盖了 font-awesome v5.0+
<i class="fas fa-phone"><span class="fa-icon-innter-text"> 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;
}
回答by bjtalbot
I changed the default text font in my CSS file with this:
我用这个更改了我的 CSS 文件中的默认文本字体：
font-family: 'Font Awesome\ 5 Free', sans-serif;
