2

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
csb00
  • 1,091
  • 2
  • 18
  • 36
  • what do you mean change style? Are you changing the weight? Multiple weights don't work in `font-awesome` If you want a different weight you should change the class from `fa` to `far`, `fas` etc and make sure you have access to the corrisponding fonts. – Bryce Howitson Nov 19 '19 at 19:43
  • @BryceHowitson it's about the font-family, he changed it and break the icon since there is no more the Font Awesome related font – Temani Afif Nov 19 '19 at 19:52
  • That's what I was trying to figure out. Couldn't tell if it was the style tag overriding the `fa` class or if they're changing the weight which also breaks Font Awesome – Bryce Howitson Nov 19 '19 at 19:54

1 Answers1

3

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415