如何在CSS伪元素中正确设置Font Awesome 5图标的字体系列？

为 Font Awesome 5 个伪元素选择正确的字体系列

在 CSS 伪元素中使用 Font Awesome 图标时，选择正确的字体系列以确保图标正确显示至关重要。正如您所遇到的，使用不正确的字体系列可能会导致图标不显示。

Font-Family 属性中的多种字体

解决方案在于利用font-family 属性中的多种字体。通过这样做，浏览器将在每个指定的字体系列中搜索图标，直到找到匹配项。在这种情况下，您可以使用：

font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";

实体和常规图标的字体系列

与您的假设相反，两者的字体系列实心和常规图标是“Font Awesome 5 Free”，而不是“Font Awesome 5 Solid”。实体图标和常规图标之间的区别在于字体粗细，而不是字体系列。

免费图标与专业图标

您还注意到，并非所有常规图标图标是免费的。有些包含在 Font Awesome 的 PRO 包中。因此，如果图标未显示，请仔细检查其在免费计划下的可用性。

示例代码

为了说明正确的用法，请考虑以下示例：

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

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

以上是如何在CSS伪元素中正确设置Font Awesome 5图标的字体系列？的详细内容。更多信息请关注PHP中文网其他相关文章！