--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' title: 'DXPR Builder 中的 Font Awesome 7 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:51:59+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder 将内置的 Font Awesome Free 图标从 6.7.2 版本升级到 7.3.1 版本。页面无需任何修改即可继续正常工作：已保存页面上的每个图标 仍会以相同的尺寸和位置呈现。图标本身经过重新绘制，因此外观略有不同。 本页介绍这一变化，并列出更新后需要检查的少数情况。 tags: - 'Install and update' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'DXPR Builder 中的 Font Awesome 7' description: |- DXPR Builder 将内置的 Font Awesome Free 图标从 6.7.2 版本升级到 7.3.1 版本。页面无需任何修改即可继续正常工作：已保存页面上的每个图标 仍会以相同的尺寸和位置呈现。图标本身经过重新绘制，因此外观略有不同。 本页介绍这一变化，并列出更新后需要检查的少数情况。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:51:59+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' articleSection: 安装与更新 - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' description: |- DXPR Builder 将内置的 Font Awesome Free 图标从 6.7.2 版本升级到 7.3.1 版本。页面无需任何修改即可继续正常工作：已保存页面上的每个图标 仍会以相同的尺寸和位置呈现。图标本身经过重新绘制，因此外观略有不同。 本页介绍这一变化，并列出更新后需要检查的少数情况。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[从这里开始](/zh-hans/hc/documentation/learn-dxpr-builder/start-here) /[安装与更新](/zh-hans/hc/documentation/learn-dxpr-builder/start-here/install) # DXPR Builder 中的 Font Awesome 7. 学习 DXPR Builder从这里开始安装与更新 ## 本指南内容 相关指南 - [图标库](/zh-hans/hc/documentation/learn-dxpr-builder/customization/icon-libraries) - [添加图标](/zh-hans/hc/documentation/learn-dxpr-builder/elements/icon) - [更新 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/updating) - [更新日志](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/changelog) 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 个。 | 样式 | Font Awesome 6.7.2 | Font Awesome 7.3.1 | |---|---|---| | Solid | 1402 | 1422 | | Regular | 163 | 169 | | Brands | 495 | 572 | 103 个新增图标包括 Claude、Copilot、 Gemini、Fediverse、Codeberg 和 Forgejo 等品牌徽标，以及黄道十二宫符号。 ## 更名与移除的图标 有 5 个图标启用了新名称。使用旧名称的页面仍会显示图标， 因为 Font Awesome 7 仍然接受旧名称。 图标选择器只提供新名称。 | 旧名称 | 新名称 | |---|---| | `user-large` | `user` | | `user-large-slash` | `user-slash` | | `headphones-simple` | `headphones` | | `handshake-simple` | `handshake` | | `handshake-simple-slash` | `handshake-slash` | 有一个图标退出了免费集合：`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 或反向代理缓存， 以便访问者获取新的样式表和字体。 ## 接下来做什么？ - [图标库](/zh-hans/hc/documentation/learn-dxpr-builder/customization/icon-libraries)：DXPR Builder 内置的图标集，以及如何按角色限制它们。 - [添加图标](/zh-hans/hc/documentation/learn-dxpr-builder/elements/icon)：在页面上放置图标并设置样式。 - [更新 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/updating)：安全地更新模块。 - [更新日志](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/changelog)：每个版本的变化。