--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/customization/icon-libraries' title: 'Icon-Bibliotheken | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:04:20+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. 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: Icon-Bibliotheken description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:04:20+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/de/hc/documentation/learn-dxpr-builder/customization/icon-libraries' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/customization/icon-libraries' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Help Center](/de/hc)/[Documentation](/de/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) # Icon-Bibliotheken. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Eigene Icon-Sets](/de/hc/documentation/learn-dxpr-builder/development/icon-sets) - [Ein Icon hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements/icon) 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](/de/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin). ## 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](/de/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7) 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](/de/hc/documentation/learn-dxpr-builder/elements/icon). ## 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](/de/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) 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](/de/hc/documentation/learn-dxpr-builder/development/icon-sets). 1. Erstellen Sie `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` 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. 2. Deklarieren Sie die Bibliothek in `mymodule.libraries.yml`. Die Seiten der Besucher laden sie: ```yaml brand_icons: css: theme: css/brand-icons.css: {} ``` 3. Leeren Sie Caches mit `drush cr`. 4. Aktivieren Sie das neue Set in jedem Builder-Profil, das **Check/Uncheck all Icon sets** nicht aktiviert hat. 5. Ö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](/de/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_icon_sets_alter). 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](/de/hc/documentation/learn-dxpr-builder/development/icon-sets): die YAML-Eigenschaftenreferenz und der Alter-Hook. - [Icon hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements/icon): die Einstellungen des Icon-Elements.