图标库.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

该 Icon 和 Circle counter 元素中的图标选择器提供网站上注册的所有图标集。DXPR Builder 自带 14 个；模块和主题可以用 YAML 文件添加更多。本页列出自带的集，解释它们的加载方式，并演示如何添加。要限制角色看到的集，请用构建器档案；请参阅用户档案。

自带的图标集

这些集注册在 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 列出了变化。

选择器和页面如何加载图标

集下拉菜单以 All icon sets 开头，再列出每个有图标列表的已注册集。除 fa 外的 13 个自带集都有内置列表，因此只有 DXPR Builder 的网站显示 14 个条目。其他模块或主题的集需要在 YAML 中有 icons 列表才会出现。

编辑人员挑选图标时，元素存放图标的类（例如 bi bi-star）和其库的名称。访客只下载其页面用到的图标字体。在编辑器中，ET Line、Pixeden 和 Glyphicon 随编辑器本身加载；选择器打开时加载其他集的样式表。

编辑人员如何选择和定型图标，请参阅添加图标。

按角色限制图标集

每个构建器档案都有 Icon sets 分组，每集一个框，以及 Check/Uncheck all Icon sets 框。请在 DXPR Studio > DXPR Builder > User Profiles 配置；步骤见用户档案。该分组的行为：

勾选 Check/Uncheck all Icon sets 时，该角色看到所有集，包括以后添加的集。
不勾选时，该角色只看到勾选的集。新档案默认如此：所有集都勾选，因此以后添加的集保持隐藏，直到您勾选它。
不勾选且一个集都不勾选时，选择器是空的。
页面上已有的图标继续显示。档案只改变选择器提供的内容。

添加图标集

图标集是一个 YAML 条目加一个 Drupal 库。DXPR Builder 读取每个已安装模块和主题的 *.dxpr_icon_sets.yml。属性参考和 alter 钩子见自定义图标集。

创建 mymodule/mymodule.dxpr_icon_sets.yml：

brand:
  label: 'Brand icons'
  prefix: brand
  css: css/brand-icons.css
  library: mymodule/brand_icons
  icons:
    - 'brand brand-logo'
    - 'brand brand-arrow'

css 相对于模块文件夹，在编辑器中加载。每个图标是前缀加一个以前缀和连字符开头的类。

在 mymodule.libraries.yml 中声明库。访客页面加载它：
```
brand_icons:
  css:
    theme:
      css/brand-icons.css: {}
```
用 drush cr 清除缓存。
在每个没有勾选 Check/Uncheck all Icon sets 的构建器档案中勾选新集。
打开 Icon 元素的设置，在集下拉菜单中选择 Brand icons。

自定义模块也可以用 alter 钩子从选择器中移除集；代码见 Hooks API 参考。自带集的图标在已保存页面上照常加载。移除的自定义集的图标不再加载其 CSS，因为 DXPR Builder 只附加已注册集命名的库。

如果缺少图标集

下拉菜单中没有新集。 其 YAML 没有 icons 列表，或缓存中还是旧注册表。请添加列表并运行 drush cr。
某些编辑人员看不到集。 他们的构建器档案没有勾选它。请在 Icon sets 下勾选它（/admin/dxpr_studio/dxpr_builder/profile）。
图标在编辑器中显示，访客看不到。 编辑器加载集的 css 文件，访客页面加载其 library。请确保 library 命名了 mymodule.libraries.yml 中包含该 CSS 文件的库。

接下来做什么？

自定义图标集：YAML 属性参考和 alter 钩子。
添加图标：Icon 元素的设置。