--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/icon-libraries' title: '图标库 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:45:00+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 该 Icon 和 Circle counter 元素中的图标选择器提供网站上注册的所有图标集。DXPR Builder 自带 14 个；模块和主题可以用 YAML 文件添加更多。本页列出自带的集，解释它们的加载方式，并演示如何添加。要限制角色看到的集，请用构建器档案；请参阅 用户档案。 自带的图标集 这些集注册在 dxpr_builder.dxpr_icon_sets.yml 中： tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 图标库 description: |- 该 Icon 和 Circle counter 元素中的图标选择器提供网站上注册的所有图标集。DXPR Builder 自带 14 个；模块和主题可以用 YAML 文件添加更多。本页列出自带的集，解释它们的加载方式，并演示如何添加。要限制角色看到的集，请用构建器档案；请参阅 用户档案。 自带的图标集 这些集注册在 dxpr_builder.dxpr_icon_sets.yml 中： image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:45:00+0000' dateModified: '2026-10-24T09:09:48+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/customization/icon-libraries' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/icon-libraries' description: |- 该 Icon 和 Circle counter 元素中的图标选择器提供网站上注册的所有图标集。DXPR Builder 自带 14 个；模块和主题可以用 YAML 文件添加更多。本页列出自带的集，解释它们的加载方式，并演示如何添加。要限制角色看到的集，请用构建器档案；请参阅 用户档案。 自带的图标集 这些集注册在 dxpr_builder.dxpr_icon_sets.yml 中： 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 --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # 图标库. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [自定义图标集](/zh-hans/hc/documentation/learn-dxpr-builder/development/icon-sets) - [Icon](/hc/documentation/learn-dxpr-builder/elements/icon) 该 **Icon** 和 **Circle counter** 元素中的图标选择器提供网站上注册的所有图标集。DXPR Builder 自带 14 个；模块和主题可以用 YAML 文件添加更多。本页列出自带的集，解释它们的加载方式，并演示如何添加。要限制角色看到的集，请用构建器档案；请参阅 [用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)。 ## 自带的图标集 这些集注册在 `dxpr_builder.dxpr_icon_sets.yml` 中： | 键 | 选择器中的标签 | 类前缀 | 库 | |---|---|---|---| | `bi` | Bootstrap Icons | `bi` | `dxpr_builder/elements.bootstrap_icons` | | `et` | ET Line Icons | `et` | `dxpr_builder/elements.et_line_font` | | `fab` | Font Awesome Free Brands | `fab` | `dxpr_builder/elements.font_awesome_6_free` | | `far` | Font Awesome Free Regular | `far` | `dxpr_builder/elements.font_awesome_6_free` | | `fas` | Font Awesome Free Solid | `fas` | `dxpr_builder/elements.font_awesome_6_free` | | `glyphicon` | Glyphicon Halflings | `glyphicon` | `dxpr_builder/elements.glyphicons_halflings` | | `pe` | Pixeden Line Icons | `pe` | `dxpr_builder/elements.pe_icon_7_stroke` | | `ph` | Phosphor Icons Regular | `ph` | `dxpr_builder/elements.phosphor_icons` | | `ph_bold` | Phosphor Icons Bold | `ph-bold` | `dxpr_builder/elements.phosphor_icons_bold` | | `ph_duotone` | Phosphor Icons Duotone | `ph-duotone` | `dxpr_builder/elements.phosphor_icons_duotone` | | `ph_fill` | Phosphor Icons Fill | `ph-fill` | `dxpr_builder/elements.phosphor_icons_fill` | | `ph_light` | Phosphor Icons Light | `ph-light` | `dxpr_builder/elements.phosphor_icons_light` | | `ph_thin` | Phosphor Icons Thin | `ph-thin` | `dxpr_builder/elements.phosphor_icons_thin` | | `fa` | Font Awesome (v4 compatibility) | `fa` | `dxpr_builder/elements.font_awesome_6_free` | 选择器不提供 `fa` 集，因为它没有图标列表。它让用旧 `fa` 类保存的图标加载 Font Awesome 库。用旧 Font Awesome 库名保存的页面还会获得 `dxpr_builder/elements.font_awesome_v4_shims` 样式表，它们的图标继续显示。 所有 Font Awesome 集都加载 Font Awesome Free 7。该库保留版本 6 的机器名，因为已保存的页面和自定义代码引用它。[DXPR Builder 中的 Font Awesome 7](/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7) 列出了变化。 ## 选择器和页面如何加载图标 集下拉菜单以 **All icon sets** 开头，再列出每个有图标列表的已注册集。除 `fa` 外的 13 个自带集都有内置列表，因此只有 DXPR Builder 的网站显示 14 个条目。其他模块或主题的集需要在 YAML 中有 `icons` 列表才会出现。 编辑人员挑选图标时，元素存放图标的类（例如 `bi bi-star`）和其库的名称。访客只下载其页面用到的图标字体。在编辑器中，ET Line、Pixeden 和 Glyphicon 随编辑器本身加载；选择器打开时加载其他集的样式表。 编辑人员如何选择和定型图标，请参阅 [添加图标](/hc/documentation/learn-dxpr-builder/elements/icon)。 ## 按角色限制图标集 每个构建器档案都有 **Icon sets** 分组，每集一个框，以及 **Check/Uncheck all Icon sets** 框。请在 **DXPR Studio** > **DXPR Builder** > **User Profiles** 配置；步骤见 [用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)。该分组的行为： - 勾选 **Check/Uncheck all Icon sets** 时，该角色看到所有集，包括以后添加的集。 - 不勾选时，该角色只看到勾选的集。新档案默认如此：所有集都勾选，因此以后添加的集保持隐藏，直到您勾选它。 - 不勾选且一个集都不勾选时，选择器是空的。 - 页面上已有的图标继续显示。档案只改变选择器提供的内容。 ## 添加图标集 图标集是一个 YAML 条目加一个 Drupal 库。DXPR Builder 读取每个已安装模块和主题的 `*.dxpr_icon_sets.yml`。属性参考和 alter 钩子见 [自定义图标集](/zh-hans/hc/documentation/learn-dxpr-builder/development/icon-sets)。 1. 创建 `mymodule/mymodule.dxpr_icon_sets.yml`： ```yaml brand: label: 'Brand icons' prefix: brand css: css/brand-icons.css library: mymodule/brand_icons icons: - 'brand brand-logo' - 'brand brand-arrow' ``` `css` 相对于模块文件夹，在编辑器中加载。每个图标是前缀加一个以前缀和连字符开头的类。 2. 在 `mymodule.libraries.yml` 中声明库。访客页面加载它： ```yaml brand_icons: css: theme: css/brand-icons.css: {} ``` 3. 用 `drush cr` 清除缓存。 4. 在每个没有勾选 **Check/Uncheck all Icon sets** 的构建器档案中勾选新集。 5. 打开 **Icon** 元素的设置，在集下拉菜单中选择 **Brand icons**。 自定义模块也可以用 alter 钩子从选择器中移除集；代码见 [Hooks API 参考](/zh-hans/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_icon_sets_alter)。自带集的图标在已保存页面上照常加载。移除的自定义集的图标不再加载其 CSS，因为 DXPR Builder 只附加已注册集命名的库。 ## 如果缺少图标集 - **下拉菜单中没有新集。** 其 YAML 没有 `icons` 列表，或缓存中还是旧注册表。请添加列表并运行 `drush cr`。 - **某些编辑人员看不到集。** 他们的构建器档案没有勾选它。请在 **Icon sets** 下勾选它（`/admin/dxpr_studio/dxpr_builder/profile`）。 - **图标在编辑器中显示，访客看不到。** 编辑器加载集的 `css` 文件，访客页面加载其 `library`。请确保 `library` 命名了 `mymodule.libraries.yml` 中包含该 CSS 文件的库。 ## 接下来做什么？ - [自定义图标集](/zh-hans/hc/documentation/learn-dxpr-builder/development/icon-sets)：YAML 属性参考和 alter 钩子。 - [添加图标](/hc/documentation/learn-dxpr-builder/elements/icon)：Icon 元素的设置。