CODEWITHSUNDEEP
cssfont-awesomefont-awesome-5
csb00
csb00

Reputation: 1155

Font Awesome 5 - Why does Icon disappear when adjusting font-family?

The code I have below manages to change the style of my font, but it makes the icon disappear. Any tips on how to make the icon appear while having the font style change?

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">

<i style="font-family: Verdana, Geneva, Tahoma, sans-serif" class="fa fa-plus-circle" id="@accordianChild1" onclick="changeIcon('@{@accordianChild1}')">
    Invoice number: </i>

Upvotes: 2

Views: 1541

Answers (1)

Temani Afif
Temani Afif

Reputation: 272947

Add the font-family of Font Awesome to the list so it get used for the icon:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >

Before<br>
<i style="font-family: Verdana, Geneva, Tahoma, sans-serif" class="fa fa-plus-circle" >
Invoice number: </i>
<br>
After<br>
<i style="font-family: Verdana, Geneva, Tahoma, sans-serif, 'Font Awesome 5 Free'" class="fa fa-plus-circle" >
Invoice number: </i>

Related: Font Awesome 5 - Choosing the correct font-family in CSS pseudo-elements

But better avoid using text inside the icon element to avoid such issue and also avoid inheriting the font-weight of the icon:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >

<i class="fa fa-plus-circle" ></i><span style="font-family: Verdana, Geneva, Tahoma, sans-serif" >Invoice number: </span>

If you try to change the font-weight you will break the icon because that version may be a Pro one:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >


<br>
<i style="font-family: Verdana, Geneva, Tahoma, sans-serif, 'Font Awesome 5 Free'" class="fa fa-plus-circle" >
Invoice number: </i>
<br>
<i style="font-weight:400;font-family: Verdana, Geneva, Tahoma, sans-serif, 'Font Awesome 5 Free'" class="fa fa-plus-circle" >
Invoice number: </i>

Related: Font Awesome 5 on pseudo elements shows square instead of icon

Upvotes: 3

Related Questions