Icon-Bibliotheken.

DXPR Builder lernenWebsite verwaltenMarke umsetzen

Die Icon-Auswahl in den Elementen Icon und Circle counter bietet jedes auf Ihrer Website registrierte Icon-Set. DXPR Builder bringt 14 Sets mit; Module und Themes können weitere per YAML-Datei hinzufügen. Diese Seite listet die mitgebrachten Sets, erklärt, wie sie laden, und zeigt, wie Sie eines hinzufügen. Um die Sets zu begrenzen, die eine Rolle sieht, nutzen Sie ein Builder-Profil; siehe Benutzerprofile.

Mitgebrachte Icon-Sets

Die Sets sind in dxpr_builder.dxpr_icon_sets.yml registriert:

Schlüssel	Bezeichnung in der Auswahl	Klassenpräfix	Bibliothek
`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`

Die Auswahl bietet das Set fa nicht an, weil es keine Icon-Liste hat. Es lässt Icons, die mit der alten fa-Klasse gespeichert sind, die Font-Awesome-Bibliothek laden. Seiten, die mit den alten Font-Awesome-Bibliotheksnamen gespeichert sind, erhalten außerdem das Stylesheet dxpr_builder/elements.font_awesome_v4_shims, damit ihre Icons weiter erscheinen.

Alle Font-Awesome-Sets laden Font Awesome Free 7. Die Bibliothek behält ihren Versions-6-Systemnamen, weil gespeicherte Seiten und eigener Code darauf verweisen. Font Awesome 7 in DXPR Builder listet, was sich geändert hat.

Wie Auswahl und Seiten Icons laden

Das Set-Dropdown beginnt mit All icon sets, dann listet es jedes registrierte Set mit Icon-Liste. Die 13 mitgebrachten Sets außer fa haben eingebaute Listen, daher zeigt eine Website mit nur DXPR Builder 14 Einträge. Ein Set aus einem anderen Modul oder Theme braucht eine icons-Liste in seinem YAML, um zu erscheinen.

Wenn eine bearbeitende Person ein Icon wählt, speichert das Element die Klassen des Icons, etwa bi bi-star, und den Namen seiner Bibliothek. Besucher laden dann nur die Icon-Fonts, die ihre Seite nutzt. Im Editor laden ET Line, Pixeden und Glyphicon mit dem Editor selbst; die Auswahl lädt die Stylesheets der übrigen Sets beim Öffnen.

Wie Bearbeitende ein Icon wählen und stylen, steht auf Icon hinzufügen.

Icon-Sets pro Rolle begrenzen

Jedes Builder-Profil hat eine Gruppe Icon sets mit einem Feld pro Set und einem Feld Check/Uncheck all Icon sets. Konfigurieren Sie sie unter DXPR Studio > DXPR Builder > User Profiles; Benutzerprofile hat die Schritte. So verhält sich die Gruppe:

Mit aktiviertem Check/Uncheck all Icon sets sieht die Rolle jedes Set, einschließlich später hinzugefügter Sets.
Ohne es sieht die Rolle nur die aktivierten Sets. Ein neues Profil beginnt so, mit jedem aktivierten Set, daher bleibt ein später hinzugefügtes Set verborgen, bis Sie es aktivieren.
Ohne es und ohne aktiviertes Set ist die Auswahl leer.
Bereits auf einer Seite liegende Icons erscheinen weiterhin. Das Profil ändert nur, was die Auswahl bietet.

Icon-Set hinzufügen

Ein Icon-Set ist ein YAML-Eintrag plus eine Drupal-Bibliothek. DXPR Builder liest *.dxpr_icon_sets.yml aus jedem installierten Modul und Theme. Die Eigenschaftenreferenz und der Alter-Hook stehen auf Eigene Icon-Sets.

Erstellen Sie 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 ist relativ zum Modulordner und lädt im Editor. Jedes Icon ist der Präfix plus eine Klasse, die mit dem Präfix und einem Bindestrich beginnt.
Deklarieren Sie die Bibliothek in mymodule.libraries.yml. Die Seiten der Besucher laden sie:
```
brand_icons:
  css:
    theme:
      css/brand-icons.css: {}
```
Leeren Sie Caches mit drush cr.
Aktivieren Sie das neue Set in jedem Builder-Profil, das Check/Uncheck all Icon sets nicht aktiviert hat.
Öffnen Sie die Einstellungen eines Icon-Elements und wählen Sie Brand icons im Set-Dropdown.

Ein eigenes Modul kann ein Set auch per Alter-Hook aus der Auswahl entfernen; der Code steht auf Hooks-API-Referenz. Icons aus einem mitgebrachten Set laden auf gespeicherten Seiten ohnehin weiter. Icons aus einem entfernten eigenen Set laden ihr CSS nicht mehr, weil DXPR Builder nur eine Bibliothek anhängt, die ein registriertes Set nennt.

Wenn ein Icon-Set fehlt

Ein neues Set steht nicht im Dropdown. Sein YAML hat keine icons-Liste, oder der Cache hält noch die alte Registry. Fügen Sie die Liste hinzu und führen Sie drush cr aus.
Manchen Bearbeitenden fehlt ein Set. Ihr Builder-Profil aktiviert es nicht. Aktivieren Sie es unter Icon sets auf /admin/dxpr_studio/dxpr_builder/profile.
Icons erscheinen im Editor, aber nicht für Besucher. Der Editor lädt die css-Datei des Sets, aber Besucherseiten laden seine library. Stellen Sie sicher, dass library eine Bibliothek in mymodule.libraries.yml nennt, die die CSS-Datei enthält.

Wie geht es weiter?

Eigene Icon-Sets: die YAML-Eigenschaftenreferenz und der Alter-Hook.
Icon hinzufügen: die Einstellungen des Icon-Elements.