CSS 伪元素

让我们来了解一下如何在使用 CSS 伪元素渲染图标时升级到版本 6。

发生了哪些变化

为了帮助实现向后兼容性，我们对 Font Awesome 如何支持使用伪元素进行了一些重要更改。

• 我们现在建议使用 我们提供的 CSS 自定义属性 定义 CSS font 属性。这将有助于让升级到未来的版本变得更加容易。
• 我们确保版本 4 和版本 5 图标 Unicode 值映射到版本 6 中的正确图标。
• 我们现在默认情况下在 Font Awesome 的 Web 字体版本中包含一个 @font-face shim。此 shim 会为您处理指向正确版本 6 Web 字体文件的操作。

升级

更新资源

您需要确保您的伪元素 CSS 规则引用的是 Font Awesome 6 资源。因此，请仔细检查您是否已更新了 工具包的设置、托管资源、托管包 或插件/组件 以使用 Font Awesome 6

与旧版本的向后兼容性

作为我们 向后兼容性功能 的一部分，Font Awesome 6 现在包括 @font-face shims，以将 v4/v5 Unicode 值映射到它们的 v6 对应项 - 任何现有的版本 5 伪元素规则都应自动转换为渲染版本 6 图标。

这些包含在版本 6 基工具包中并自动加载。如果您自己托管 Web 字体 或 SVG 基文件，请查看如何以及何时手动包含它们。

请记住 确保您的自定义 CSS 规则 包含每个图标的正确权重和 Unicode 值。

更新字体规则语法

通过完成此可选步骤，您可以确保您的伪元素自定义 CSS 是最新的，并且可以防范未来的升级。版本 5 伪元素定义看起来像这样。

/* Old Version 5 CSS - Common properties to render all icons */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Old Version 5 CSS - For referencing individual icons */
.login::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f007';
}

.tps::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  content: '\f1ea';
}

我们将许多复杂性（例如以 font 为中心的公共属性以及 font-family 和 font-weight）移到了 我们提供的 CSS 自定义属性 中。让我们更改上面的自定义 CSS 以使用版本 6 的语法。我们将执行以下操作

1. 从公共属性规则中删除任何与 font 相关的属性
2. 使用基于自定义属性的 font 值定义图标的样式

/* New Simplified Version 6 CSS */
/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
  /* removed font- based rules */
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2: Reference Individual Icons */
.login::before {
  /* using style CSS custom property */
  font: var(--fa-font-solid);
  content: '\f007';
}

/* Note: Make sure to include the correct weight and Unicode value for the icon */
.tps::before {
  /* using style CSS custom property */
  font: var(--fa-font-solid);
  content: '\f1ea';
}

---

您已准备就绪！

您的项目现在将加载版本 6，并使用我们最新、最棒的图标和选项渲染任何现有的图标。您是否遇到了麻烦？查看我们的 故障排除指南，获取有关在 Web 上使用 Font Awesome 的常见问题的答案。

您可能想查看 我们在版本 6 中添加的大量新图标，包括新的 锐化系列 和 细体样式，或者查看版本 6 的所有新 样式选项。