Font Awesome 7 in DXPR Builder.

DXPR Builder lerenBegin hierInstalleren en bijwerken

DXPR Builder werkt zijn meegeleverde Font Awesome Free-pictogrammen bij van versie 6.7.2 naar 7.3.1. Pagina's blijven werken zonder bewerkingen: elk pictogram op een opgeslagen pagina rendert nog steeds, in dezelfde grootte en positie. De pictogrammen zelf zijn hertekend, dus ze zien er iets anders uit. Deze pagina toont de wijziging en somt de weinige gevallen op die na het bijwerken een controle nodig hebben.

Wat er wijzigt op je pagina's

  • Nieuwe pictogramontwerpen. Font Awesome 7 tekent zijn pictogrammen opnieuw met zwaardere, rondere vormen. Regular-pictogrammen (omlijnd) krijgen dikkere lijnen. Merklogo's zijn bijna ongewijzigd.
  • Dezelfde lay-out. Font Awesome 7 geeft elk pictogram standaard een vaste breedte, wat smalle pictogrammen naar rechts zou schuiven. DXPR Builder behoudt het Font Awesome 6-gedrag op zijn pagina's en in de editor, zodat pictogrammen hun positie en spatiëring behouden. Enkele hertekende pictogrammen zijn iets smaller, zoals house en truck. Pictogrammen met de klasse fa-fw, zoals social links, behouden hun vaste breedte als voorheen.
  • Dezelfde klassenamen. Opgeslagen pagina's behouden hun pictogramklassen, zoals fas fa-house. Klassen uit Font Awesome 4 en 5 blijven werken via de compatibiliteitsstijlen, die nog steeds dezelfde 464 oude namen dekken.

Voor en na

Elke tegel toont één pictogram twee keer. Het grijze pictogram links is Font Awesome 6.7.2; het zwarte pictogram rechts is Font Awesome 7.3.1.

Raster van 64 veelgebruikte effen interfacepictogrammen met Font Awesome 6 links en Font Awesome 7 rechts

Raster van pictogrammen in regular-stijl en populaire merklogo's met Font Awesome 6 en Font Awesome 7

Raster van de pictogrammen gebruikt in DXPR Builder-sjablonen en democontent in Font Awesome 6 en Font Awesome 7

Nieuwe pictogrammen

De pictogramkiezer somt nu 1992 gratis pictogrammen op, tegen 1895 eerst.

Stijl Font Awesome 6.7.2 Font Awesome 7.3.1
Effen 1402 1422
Regular 163 169
Merken 495 572

De 103 nieuwe pictogrammen omvatten merklogo's zoals Claude, Copilot, Gemini, Fediverse, Codeberg en Forgejo, en de sterrenbeelden.

Hernoemde en verwijderde pictogrammen

Vijf pictogrammen hebben nieuwe namen. Pagina's die de oude namen gebruiken tonen het pictogram nog steeds, omdat Font Awesome 7 ze nog accepteert. De pictogramkiezer biedt alleen de nieuwe namen.

Oude naam Nieuwe naam
user-large user
user-large-slash user-slash
headphones-simple headphones
handshake-simple handshake
handshake-simple-slash handshake-slash

Eén pictogram verlaat de gratis set: vector-square. Font Awesome 7 biedt hem alleen in zijn betaalde Pro-editie, dus een pagina die fa-vector-square gebruikt toont na de update geen pictogram. Vervang hem door een gratis pictogram zoals draw-polygon of object-group.

Wat hetzelfde blijft

  • Licentie. Font Awesome Free behoudt dezelfde voorwaarden. De pictogrammen gebruiken CC BY 4.0, de lettertypen SIL OFL 1.1 en de code MIT.
  • Bibliotheeknamen. De Drupal-bibliotheek behoudt zijn machinenaam, dxpr_builder/elements.font_awesome_6_free, omdat opgeslagen pagina's en maatwerkcode ernaar verwijzen. Hij laadt nu Font Awesome 7.
  • Browserondersteuning. Font Awesome 7 levert alleen WOFF2-lettertypen. Elke browser die DXPR Builder ondersteunt leest WOFF2.

Controleer je site na het bijwerken

  1. Zoek je inhoud op fa-vector-square en vervang hem zoals hierboven beschreven.
  2. Controleer aangepaste thema-CSS die zelf Font Awesome-pictogrammen tekent. Font Awesome 7 hernoemt zijn lettertypen naar “Font Awesome 7 Free” en “Font Awesome 7 Brands”. CSS die font-family instelt op “Font Awesome 6 Free” of “Font Awesome 6 Brands” samen met een content-codepunt toont het pictogram niet meer. Gebruik de nieuwe namen, of de custom properties --fa-family-classic en --fa-family-brands die Font Awesome 7 biedt.
  3. Controleer thema-markup die op sr-only vertrouwt. Font Awesome 6 definieerde een klasse sr-only en Font Awesome 7 niet. Tekst die een thema ermee verborg wordt zichtbaar. Bootstrap 5-thema's kunnen in plaats daarvan visually-hidden gebruiken.
  4. Controleer themapictogrammen buiten DXPR Builder-inhoud. Pictogrammen die je thema rendert buiten een DXPR Builder-pagina, zoals in een menu of footer, volgen de vaste breedte van Font Awesome 7. Om de oude breedtes ook daar te behouden, stel je --fa-width: auto in op hun container.
  5. Wis caches. Draai drush cr en purge elke CDN- of reverse-proxy-cache zodat bezoekers de nieuwe stylesheets en lettertypen ontvangen.

Wat nu?