Font Awesome 5 - 为什么在调整字体系列时图标会消失？

Question

我下面的代码设法改变了我的字体样式，但它使图标消失了。关于如何在更改字体样式的同时显示图标的任何提示？

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

Answer 1

将 Font Awesome 的字体系列添加到列表中，以便用于图标：

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

相关：

但最好避免在图标元素内使用文本以避免此类问题，也避免继承图标的 font-weight:

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

如果您尝试更改 font-weight 您会破坏图标，因为该版本可能是专业版：

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

Font Awesome 5 - 为什么在调整字体系列时图标会消失？

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

css

font-awesome

font-awesome-5