--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' title: 'Font Awesome 7 in DXPR Builder | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:55:39+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder aktualisiert seine mitgelieferten Font-Awesome-Free-Icons von Version 6.7.2 auf 7.3.1. Seiten funktionieren ohne Änderungen weiter: Jedes Icon auf einer gespeicherten Seite rendert weiterhin, in derselben Größe und Position. Die Icons selbst sind neu gezeichnet, sehen also etwas anders aus. Diese Seite zeigt die Änderung und listet die wenigen Fälle auf, die nach dem Update eine Prüfung brauchen. tags: - 'Installeren en bijwerken' 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: 'Font Awesome 7 in DXPR Builder' description: |- DXPR Builder aktualisiert seine mitgelieferten Font-Awesome-Free-Icons von Version 6.7.2 auf 7.3.1. Seiten funktionieren ohne Änderungen weiter: Jedes Icon auf einer gespeicherten Seite rendert weiterhin, in derselben Größe und Position. Die Icons selbst sind neu gezeichnet, sehen also etwas anders aus. Diese Seite zeigt die Änderung und listet die wenigen Fälle auf, die nach dem Update eine Prüfung brauchen. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:55:39+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/getting-started/font-awesome-7' articleSection: 'Installeren en bijwerken' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' description: |- DXPR Builder aktualisiert seine mitgelieferten Font-Awesome-Free-Icons von Version 6.7.2 auf 7.3.1. Seiten funktionieren ohne Änderungen weiter: Jedes Icon auf einer gespeicherten Seite rendert weiterhin, in derselben Größe und Position. Die Icons selbst sind neu gezeichnet, sehen also etwas anders aus. Diese Seite zeigt die Änderung und listet die wenigen Fälle auf, die nach dem Update eine Prüfung brauchen. 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) /[Start here](/hc/documentation/learn-dxpr-builder/start-here) /[Installeren en bijwerken](/hc/documentation/learn-dxpr-builder/start-here/install) # Font Awesome 7 in DXPR Builder. Learn DXPR BuilderStart hereInstalleren en bijwerken ## In this guide Related guides - [Icon-Bibliotheken](/de/hc/documentation/learn-dxpr-builder/customization/icon-libraries) - [Ein Icon hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements/icon) - [DXPR Builder aktualisieren](/de/hc/documentation/learn-dxpr-builder/getting-started/updating) - [Changelog](/de/hc/documentation/learn-dxpr-builder/getting-started/changelog) DXPR Builder aktualisiert seine mitgelieferten Font-Awesome-Free-Icons von Version 6.7.2 auf 7.3.1. Seiten funktionieren ohne Änderungen weiter: Jedes Icon auf einer gespeicherten Seite rendert weiterhin, in derselben Größe und Position. Die Icons selbst sind neu gezeichnet, sehen also etwas anders aus. Diese Seite zeigt die Änderung und listet die wenigen Fälle auf, die nach dem Update eine Prüfung brauchen. ## Was sich auf Ihren Seiten ändert - **Neue Icon-Designs.** Font Awesome 7 zeichnet seine Icons mit schwereren, runderen Formen neu. Regular-Icons (Outline) erhalten dickere Linien. Markenlogos sind fast unverändert. - **Gleiches Layout.** Font Awesome 7 gibt jedem Icon standardmäßig eine feste Breite, was schmale Icons nach rechts rücken würde. DXPR Builder behält das Font-Awesome-6-Verhalten auf seinen Seiten und im Editor, sodass Icons Position und Abstände behalten. Wenige neu gezeichnete Icons sind etwas schmaler, zum Beispiel house und truck. Icons mit der Klasse `fa-fw`, zum Beispiel Social Links, bleiben wie zuvor fest breit. - **Gleiche Klassennamen.** Gespeicherte Seiten behalten ihre Icon-Klassen, zum Beispiel `fas fa-house`. Klassen aus Font Awesome 4 und 5 funktionieren weiter über die Kompatibilitätsstile, die weiterhin dieselben 464 alten Namen abdecken. ## Vorher und nachher Jede Kachel zeigt ein Icon zweimal. Das graue Icon links ist Font Awesome 6.7.2; das schwarze Icon rechts ist Font Awesome 7.3.1. ## Neue Icons Die Icon-Auswahl listet nun 1.992 kostenlose Icons, zuvor 1.895. | Stil | Font Awesome 6.7.2 | Font Awesome 7.3.1 | |---|---|---| | Solid | 1402 | 1422 | | Regular | 163 | 169 | | Brands | 495 | 572 | Die 103 neuen Icons enthalten Markenlogos wie Claude, Copilot, Gemini, Fediverse, Codeberg und Forgejo sowie die Sternzeichen. ## Umbenannte und entfernte Icons Fünf Icons haben neue Namen. Seiten, die die alten Namen nutzen, zeigen das Icon weiterhin, denn Font Awesome 7 akzeptiert sie noch. Die Icon-Auswahl bietet nur die neuen Namen. | Alter Name | Neuer Name | |---|---| | `user-large` | `user` | | `user-large-slash` | `user-slash` | | `headphones-simple` | `headphones` | | `handshake-simple` | `handshake` | | `handshake-simple-slash` | `handshake-slash` | Ein Icon verlässt das kostenlose Set: `vector-square`. Font Awesome 7 bietet es nur in seiner kostenpflichtigen Pro-Edition, sodass eine Seite, die `fa-vector-square` nutzt, nach dem Update kein Icon zeigt. Ersetzen Sie es durch ein kostenloses Icon wie `draw-polygon` oder `object-group`. ## Was gleich bleibt - **Lizenz.** Font Awesome Free behält dieselben Bedingungen. Die Icons nutzen CC BY 4.0, die Schriften SIL OFL 1.1 und der Code MIT. - **Bibliotheksnamen.** Die Drupal-Bibliothek behält ihren Maschinennamen `dxpr_builder/elements.font_awesome_6_free`, denn gespeicherte Seiten und eigener Code verweisen darauf. Sie lädt nun Font Awesome 7. - **Browserunterstützung.** Font Awesome 7 liefert nur WOFF2-Schriften. Jeder Browser, den DXPR Builder unterstützt, liest WOFF2. ## Ihre Website nach dem Update prüfen 1. **Durchsuchen Sie Ihre Inhalte nach `fa-vector-square`** und ersetzen Sie es wie oben beschrieben. 2. **Prüfen Sie eigenes Theme-CSS, das Font-Awesome-Icons selbst zeichnet.**Font Awesome 7 benennt seine Schriften in „Font Awesome 7 Free“ und „Font Awesome 7 Brands“ um. CSS, das `font-family` auf „Font Awesome 6 Free“ oder „Font Awesome 6 Brands“ setzt, zusammen mit einem `content`-Codepoint, zeigt das Icon nicht mehr. Nutzen Sie die neuen Namen oder die `--fa-family-classic`- und `--fa-family-brands`-Custom- Properties, die Font Awesome 7 bereitstellt. 3. **Prüfen Sie Theme-Markup, das auf `sr-only` baut.** Font Awesome 6 definierte eine `sr-only`-Klasse und Font Awesome 7 nicht. Text, den ein Theme damit verbarg, wird sichtbar. Bootstrap-5-Themes können stattdessen `visually-hidden` nutzen. 4. **Prüfen Sie Theme-Icons außerhalb von DXPR-Builder-Inhalten.** Icons, die Ihr Theme außerhalb einer DXPR-Builder-Seite rendert, zum Beispiel in einem Menü oder Footer, folgen der festen Breite von Font Awesome 7. Um die alten Breiten auch dort zu behalten, setzen Sie `--fa-width: auto` auf ihrem Container. 5. **Caches leeren.** Führen Sie `drush cr` aus und purgen Sie jeden CDN- oder Reverse- Proxy-Cache, sodass Besucher die neuen Stylesheets und Schriften erhalten. ## Wie geht es weiter? - [Icon-Bibliotheken](/de/hc/documentation/learn-dxpr-builder/customization/icon-libraries): Die Icon- Sets, die DXPR Builder mitbringt, und wie Sie sie pro Rolle einschränken. - [Ein Icon hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements/icon): Icons auf einer Seite platzieren und gestalten. - [DXPR Builder aktualisieren](/de/hc/documentation/learn-dxpr-builder/getting-started/updating): Das Modul sicher aktualisieren. - [Changelog](/de/hc/documentation/learn-dxpr-builder/getting-started/changelog): Was sich in jedem Release ändert.