Font Awesome 5在伪元素中选择正确的字体系列

Z时代
2024-01-10
分类：问答

我目前对在CSS伪元素中使用图标感到困惑。有4种字体家庭为fontawesome：，Font Awesome 5 Free，，Font Awesome 5 SolidFont Awesome 5 BrandsFont Awesome 5 Regular

这是HTML：

<h1>Hello</h1>

回答：

如您所见，它是一个brands图标，所以font-family：Font Awesome 5 Brands

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f099"; /* TWITTER ICON */
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

回答：

如您所见，它是一个solid图标，所以font-family：Font Awesome 5 Solid

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f095"; /* PHONE ICON */
  font-family: "Font Awesome 5 Solid";
  font-weight: 900;
}

我们如何知道何时使用正确的字体系列？

回答：

只需将它们全部使用在同一位置font-family，您的浏览器即可完成工作。如果它在第一个中找不到，它将使用第二个。（Font-Family属性中有多种字体？）

顺便说一句，正确的font-family方法Free不是Solid因为Solid和Regular之间的差异是font-weight和两者都相同font-family。在font-family中没有 Solid and Regular，只有Freeand Brands。

您可能还会注意到，Solid图标的几乎所有版本都是免费的，但并非所有regular版本都是免费的。其中一些包含在PRO软件包中。如果没有显示图标，则不一定是font-family问题。

所有Light和duotone版本均为PRO版本。

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";
}
.icon1:before {
  content: "\f099";
  /* TWITTER ICON */
  font-weight: 400;
}
.icon2:before {
  content: "\f095";
  /* PHONE ICON */
  font-weight: 900;
}
.icon3:before {
  content: "\f095";
  /* PHONE ICON */
  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >
<div class="icon1 icon"></div>
<div class="icon2 icon"></div>
<br>
<div class="icon3 icon"></div>