Icon-Bibliotheken.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

Der Icon-Picker 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 mit einer YAML-Datei weitere hinzufügen. Diese Seite listet die mitgelieferten Sets, erklärt, wie sie laden, und zeigt Ihnen, wie Sie eines hinzufügen. Um einzuschränken, welche Sets eine Rolle sieht, nutzen Sie ein Builder-Profil; siehe Benutzerprofile.

Mitgelieferte Icon-Sets

Die Sets sind in dxpr_builder.dxpr_icon_sets.yml registriert:

Schlüssel Bezeichnung im Picker Klassenpräfix Library
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

Der Picker bietet das Set fa nicht an, weil es keine Icon-Liste hat. Es sorgt dafür, dass Icons, die mit der alten fa-Klasse gespeichert wurden, die Font-Awesome-Library laden. Seiten, die mit den alten Font-Awesome-Library-Namen gespeichert wurden, erhalten zusätzlich das Stylesheet dxpr_builder/elements.font_awesome_v4_shims, sodass ihre Icons weiter erscheinen.

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

Wie Picker und Seiten Icons laden

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

Wenn die Redaktion ein Icon wählt, speichert das Element die Klassen des Icons, etwa bi bi-star, und den Namen seiner Library. Besucher laden dann nur die Icon-Fonts, die ihre Seite nutzt. Im Editor laden ET Line, Pixeden und Glyphicon mit dem Editor selbst; der Picker lädt die Stylesheets der anderen Sets, wenn er sich öffnet.

Wie die Redaktion Icons wählt und stylt, steht auf Ein Icon hinzufügen.

Icon-Sets pro Rolle einschränken

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

  • Mit angewähltem Check/Uncheck all Icon sets sieht die Rolle jedes Set, einschließlich später hinzugefügter Sets.
  • Ohne Anwahl sieht die Rolle nur die angewählten Sets. Ein neues Profil startet so, mit jedem Set angewählt, sodass ein später hinzugefügtes Set verborgen bleibt, bis Sie es anwählen.
  • Ohne Anwahl und ohne angewähltes Set ist der Picker leer.
  • Bereits auf einer Seite liegende Icons erscheinen weiter. Das Profil ändert nur, was der Picker anbietet.

Ein Icon-Set hinzufügen

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

  1. 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 das Präfix plus eine Klasse, die mit dem Präfix und einem Bindestrich beginnt.

  2. Deklarieren Sie die Library in mymodule.libraries.yml. Die Seiten der Besucher laden sie:

    brand_icons:
  css:
    theme:
      css/brand-icons.css: {}

  3. Leeren Sie die Caches mit drush cr.

  4. Wählen Sie das neue Set in jedem Builder-Profil an, in dem Check/Uncheck all Icon sets nicht angewählt ist.

  5. Öffnen Sie die Einstellungen eines Icon-Elements und wählen Sie Brand icons im Set-Dropdown.

Ein eigenes Modul kann ein Set mit einem Alter-Hook auch aus dem Picker entfernen; der Code steht in der Hooks-API-Referenz. Icons aus einem mitgelieferten Set laden auf gespeicherten Seiten ohnehin weiter. Icons aus einem entfernten eigenen Set laden ihr CSS nicht mehr, weil DXPR Builder nur eine Library einbindet, 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.
  • Ein Set fehlt nur bei einzelnen Personen der Redaktion. Deren Builder-Profil wählt es nicht an. Wählen Sie es unter Icon sets unter /admin/dxpr_studio/dxpr_builder/profile an.
  • Icons erscheinen im Editor, aber nicht für Besucher. Der Editor lädt die css-Datei des Sets, aber die Seiten der Besucher laden seine library. Stellen Sie sicher, dass library eine Library in mymodule.libraries.yml nennt, die die CSS-Datei enthält.

Wie geht es weiter?