首页 > 解决方案 > 在字体真棒图标之后更改字体系列

问题描述

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

我已经在网上阅读了有关伪元素的信息,但无法弄清楚。

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

非常感谢!

在此处输入图像描述

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

标签: cssfont-awesomefont-familyfont-awesome-5

解决方案


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

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

或者在 css 中使用伪元素 ::before 将 font-awesome 图标应用到没有图标标签的文本的左侧(之前):

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

推荐阅读