为 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中文网其他相关文章！
