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 Awesome 5 - Choosing the correct font-family in CSS pseudo-elements

但是最好避免在icon元素内使用文本以避免这种问题，并且还避免继承图标的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，则会中断图标，因为该版本可能是Pro版本：

<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 on pseudo elements shows square instead of icon

真棒字体5-调整字体系列时，为什么图标会消失？

1 个答案: