为什么我的 Font Awesome 5 图标显示为正方形而不是图标？

Font Awesome 5 伪元素问题：方块与图标

在 CSS 中，使用伪元素显示 Font Awesome 5 图标有时可以导致本文中出现意外的方块而不是图标我们将探讨问题的原因以及解决方法。

正方形的原因

产生的正方形问题是由于缺乏适当的字符权重引起的。默认情况下，伪元素具有“正常”字体粗细，这不适合需要“粗体”或“900”粗细才能正确显示的 Font Awesome 图标。

解决方法

解决这个问题将以下规则添加到您的 CSS 中：

.myClass::after {
  font-weight: 900;
}

此规则会将伪元素的字体粗细设置为“900”，这将使 Font Awesome 图标正确显示

例外

请注意，此修复仅适用于其他图标集的图标可能需要不同的字体粗细。

以上是为什么我的 Font Awesome 5 图标显示为正方形而不是图标？的详细内容。更多信息请关注PHP中文网其他相关文章！