Изменить семейство шрифтов после значка шрифта

Question

Я создаю веб-сайт с использованием значков шрифтов и заметил, что семейство шрифтов меняется, когда я использую значок.

Я читал в Интернете о псевдоэлементах, но пока не могу понятьout.

Есть ли какой-либо способ (пример кода), который я могу использовать для наследования того же семейства шрифтов, которое используется в webiste, после использования значка шрифта?

Большое спасибо!

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

Answer 1

Вы можете сделать это, установив несколько имен шрифтов в 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>

Answer 2

Font-Awesome использует свое семейство шрифтов.Используйте его следующим образом:

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

ИЛИ используйте псевдоэлемент :: before в css, чтобы применить иконку font-awesome слева (перед) вашего текста без тега icon:

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