Font Awesome 7 in DXPR Builder.

Learn DXPR BuilderStart hereInstalleren en bijwerken

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.

Raster aus 64 gängigen Solid-Interface-Icons im Vergleich Font Awesome 6 links mit Font Awesome 7 rechts

Raster aus Regular-Icons und beliebten Markenlogos im Vergleich Font Awesome 6 mit Font Awesome 7

Raster der Icons aus DXPR-Builder-Vorlagen und Demo-Inhalten in Font Awesome 6 und Font Awesome 7

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?