DXPR Builder 中的 Font Awesome 7.

DXPR Builder 将内置的 Font Awesome Free 图标从 6.7.2 版本升级到 7.3.1 版本。页面无需任何修改即可继续正常工作：已保存页面上的每个图标 仍会以相同的尺寸和位置呈现。图标本身经过重新绘制，因此外观略有不同。 本页介绍这一变化，并列出更新后需要检查的少数情况。

您的页面会有哪些变化

• 全新的图标设计。Font Awesome 7 以更粗重、更圆润的造型重新绘制了图标。 Regular（描边）图标的线条更粗。品牌徽标几乎没有变化。
• 布局不变。Font Awesome 7 默认给每个图标固定宽度， 这会让窄图标右移。DXPR Builder 在其页面和编辑器中保留 Font Awesome 6 的行为， 因此图标的位置和间距不变。少数重新绘制的图标略窄一些， 例如 house 和 truck。带有 fa-fw 类的图标， 例如社交链接，与之前一样保持固定宽度。
• 类名不变。已保存的页面保留其图标类，例如 fas fa-house。来自 Font Awesome 4 和 5 的类通过兼容样式继续有效， 这些样式仍覆盖同样的 464 个旧名称。

更新前后对比

每组图块将一个图标展示两次。左侧的灰色图标是 Font Awesome 6.7.2，右侧的黑色图标是 Font Awesome 7.3.1。

新增图标

图标选择器现在列出 1992 个免费图标，高于之前的 1895 个。

103 个新增图标包括 Claude、Copilot、 Gemini、Fediverse、Codeberg 和 Forgejo 等品牌徽标，以及黄道十二宫符号。

更名与移除的图标

有 5 个图标启用了新名称。使用旧名称的页面仍会显示图标， 因为 Font Awesome 7 仍然接受旧名称。 图标选择器只提供新名称。

有一个图标退出了免费集合：vector-square。Font Awesome 7 仅在其付费的 Pro 版本中提供该图标， 因此使用 fa-vector-square 的页面在更新后将不显示图标。请将其替换为免费图标， 例如 draw-polygon 或 object-group。

不变的内容

• 许可。Font Awesome Free 的条款不变。图标采用 CC BY 4.0，字体采用 SIL OFL 1.1，代码采用 MIT。
• 库名称。Drupal 库保留其机器名 dxpr_builder/elements.font_awesome_6_free，因为已保存的页面和自定义代码引用了它。 它现在加载 Font Awesome 7。
• 浏览器支持。Font Awesome 7 仅提供 WOFF2 格式的字体。DXPR Builder 支持的每款浏览器 都能读取 WOFF2。

更新后检查您的站点

1. 在您的内容中搜索 fa-vector-square，并按上文所述替换它。
2. 检查自行绘制 Font Awesome 图标的自定义主题 CSS。 Font Awesome 7 将其字体更名为 "Font Awesome 7 Free"和 "Font Awesome 7 Brands"。如果 CSS 将 font-family 设为 "Font Awesome 6 Free"或"Font Awesome 6 Brands"，并配合 content 码点使用， 图标将不再显示。请使用新名称， 或使用 Font Awesome 7 提供的 --fa-family-classic 和 --fa-family-brands 自定义属性。
3. 检查依赖 sr-only 的主题标记。Font Awesome 6 定义了 sr-only 类，而 Font Awesome 7 没有。主题用它隐藏的文本会变为可见。 Bootstrap 5 主题可以改用 visually-hidden。
4. 检查 DXPR Builder 内容之外的主题图标。主题在 DXPR Builder 页面之外呈现的图标，例如菜单或页脚中的图标， 遵循 Font Awesome 7 的固定宽度。要在这些位置也保留旧宽度， 请在其容器上设置 --fa-width: auto。
5. 清除缓存。运行 drush cr，并清除所有 CDN 或反向代理缓存， 以便访问者获取新的样式表和字体。

接下来做什么？

• 图标库：DXPR Builder 内置的图标集，以及如何按角色限制它们。
• 添加图标：在页面上放置图标并设置样式。
• 更新 DXPR Builder：安全地更新模块。
• 更新日志：每个版本的变化。