在字体真棒图标之后更改字体系列答案

【问题标题】：Change font-family after font-awesome icon在字体真棒图标之后更改字体系列
【发布时间】：2019-01-26 18:41:07
【问题描述】：

我正在使用字体真棒图标构建一个网站，我注意到当我使用图标时字体系列会发生变化。

我在网上读到过关于伪元素的文章，但还是不明白。

在使用字体真棒图标后，有什么方法（代码示例）可以用来继承网站中使用的相同字体系列？

非常感谢！

  <script src="https://use.fontawesome.com/cce2885033.js"></script>

<br><i class="fa fa-check"> If the athlete does not have time and has to eat 1 hour before the game, 70g are usually enough.</i><br>

【问题讨论】：

不要在fa- 分类节点内添加文本。这不是最佳做法。保持分开。
请贴出你目前尝试过的相关代码sn-ps。
感谢您的回复。我确实添加了一个sn-p。您是否认为可能有一种方法可以在检查图标之后控制字体系列？
正如@Prajwal 所说，这不是应该使用字体的方式，请阅读 DOC。不要在i中放文字
哦，我明白了。有道理知道！非常感谢您的努力，感谢您抽出宝贵时间帮助我解决问题。

标签： css font-awesome font-family font-awesome-5

【解决方案1】：

Font-Awesome 应用自己的字体系列。像这样使用它：

<i class="fa fa-check"></i><p style="font-family:'yourfont';">TEXT</p>

或者在 css 中使用伪元素 ::before 在没有图标标签的文本的左侧（之前）应用字体真棒图标：

p::before {
 font-family: "Font Awesome\ 5 Free";
 display: inline-block;
 padding-right: 3px;
 font-weight: 900;
 content: "\f00c";
}

【讨论】：

非常感谢您的回答！我已经尝试过@Prajwals 的推荐并且效果很好。

【解决方案2】：

您可以将几个字体名称设置为font-family 属性：

i.fa {font-family: "FontAwesome", "Lobster", sans-serif}

<script src="https://use.fontawesome.com/cce2885033.js"></script>
 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
 
<br><i class="fa fa-check"> If the athlete does not have time and has to eat 1 hour before the game, 70g are usually enough.</i><br>

【讨论】：