Change font-family after font-awesome icon

1
votes

I am builting a website using font-awesome icons and I noticed that the font-family changes when I use an icon.

I've read online about pseudo elements, but yet can't figure it out.

Is there any way (example of code), that I can use so as to inherit the same font-family which is used in the webiste, after using a font awesome icon?

Many thanks!

enter image description here

  <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>
2
cssfont-awesomefont-familyfont-awesome-5
Do not add text inside fa- classed nodes. It's not best practice. Keep it separate. - Prajwal
Please post relevant code snippets of what you have tried so far. - AndrewL64
Thanks for your responses. I did add a snippet. Would you think that there may be a way to have a control over the font-family after the check icon? - thanos_zach
as @Prajwal said, this is not how font should be used,read the DOC. Don't put text inside i - Temani Afif
Oh I see guys. Make sense know! many thanks for your effort and I appreciate your time helping me resolve my issue. - thanos_zach

2 Answers

2
votes

Font-Awesome applies its own font family. Use it like this:

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

OR use pseudo element ::before in css to apply font-awesome icon to the left(before) of your text without icon tag:

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

You might do it setting several font names to font-family property:

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>