Font Awesome 7 in DXPR Builder.

Impara DXPR BuilderInizia da quiInstalla e aggiorna

DXPR Builder aggiorna le icone Font Awesome Free incluse dalla versione 6.7.2 alla 7.3.1. Le pagine continuano a funzionare senza modifiche: ogni icona su una pagina salvata viene ancora mostrata, con le stesse dimensioni e posizione. Le icone stesse sono ridisegnate, quindi hanno un aspetto leggermente diverso. Questa pagina mostra il cambiamento ed elenca i pochi casi da controllare dopo l’aggiornamento.

Cosa cambia nelle tue pagine

  • Nuovi design delle icone. Font Awesome 7 ridisegna le sue icone con forme più pesanti e arrotondate. Le icone Regular (outline) hanno linee più spesse. I loghi dei brand restano quasi invariati.
  • Stesso layout. Font Awesome 7 assegna a ogni icona una larghezza fissa per impostazione predefinita, il che sposterebbe le icone strette verso destra. DXPR Builder mantiene il comportamento di Font Awesome 6 sulle sue pagine e nell’editor, così le icone mantengono posizione e spaziatura. Alcune icone ridisegnate sono leggermente più strette, come house e truck. Le icone con la classe fa-fw, come i social link, restano a larghezza fissa come prima.
  • Stessi nomi di classe. Le pagine salvate mantengono le loro classi di icone, come fas fa-house. Le classi di Font Awesome 4 e 5 continuano a funzionare grazie agli stili di compatibilità, che coprono ancora gli stessi 464 vecchi nomi.

Prima e dopo

Ogni riquadro mostra un’icona due volte. L’icona grigia a sinistra è Font Awesome 6.7.2; l’icona nera a destra è Font Awesome 7.3.1.

Griglia di 64 icone di interfaccia solid comuni che confronta Font Awesome 6 a sinistra con Font Awesome 7 a destra

Griglia di icone in stile regular e loghi di brand popolari che confronta Font Awesome 6 con Font Awesome 7

Griglia delle icone usate nei modelli e nei contenuti demo di DXPR Builder in Font Awesome 6 e Font Awesome 7

Nuove icone

Il selettore di icone ora elenca 1.992 icone gratuite, prima erano 1.895.

Stile Font Awesome 6.7.2 Font Awesome 7.3.1
Solid 1.402 1.422
Regular 163 169
Brands 495 572

Le 103 nuove icone includono loghi di brand come Claude, Copilot, Gemini, Fediverse, Codeberg e Forgejo, e i segni zodiacali.

Icone rinominate e rimosse

Cinque icone hanno nuovi nomi. Le pagine che usano i vecchi nomi continuano a mostrare l’icona, perché Font Awesome 7 li accetta ancora. Il selettore di icone offre solo i nuovi nomi.

Vecchio nome Nuovo nome
user-large user
user-large-slash user-slash
headphones-simple headphones
handshake-simple handshake
handshake-simple-slash handshake-slash

Un’icona lascia il set gratuito: vector-square. Font Awesome 7 la offre solo nella sua edizione Pro a pagamento, quindi una pagina che usa fa-vector-square non mostra alcuna icona dopo l’aggiornamento. Sostituiscila con un’icona gratuita come draw-polygon o object-group.

Cosa resta invariato

  • Licenza. Font Awesome Free mantiene gli stessi termini. Le icone usano CC BY 4.0, i font SIL OFL 1.1 e il codice MIT.
  • Nomi delle librerie. La libreria Drupal mantiene il suo machine name, dxpr_builder/elements.font_awesome_6_free, perché le pagine salvate e il codice personalizzato vi fanno riferimento. Ora carica Font Awesome 7.
  • Supporto browser. Font Awesome 7 distribuisce solo font WOFF2. Ogni browser supportato da DXPR Builder legge WOFF2.

Controlla il tuo sito dopo l’aggiornamento

  1. Cerca nei tuoi contenuti fa-vector-square e sostituiscilo come descritto sopra.
  2. Controlla il CSS del tema personalizzato che disegna da sé le icone Font Awesome. Font Awesome 7 rinomina i suoi font in “Font Awesome 7 Free” e “Font Awesome 7 Brands”. Il CSS che imposta font-family su “Font Awesome 6 Free” o “Font Awesome 6 Brands” insieme a un content code point smette di mostrare l’icona. Usa i nuovi nomi, o le custom property --fa-family-classic e --fa-family-brands fornite da Font Awesome 7.
  3. Controlla il markup del tema che si basa su sr-only. Font Awesome 6 definiva una classe sr-only e Font Awesome 7 no. Il testo che un tema nascondeva con essa diventa visibile. I temi Bootstrap 5 possono usare visually-hidden al suo posto.
  4. Controlla le icone del tema fuori dai contenuti di DXPR Builder. Le icone che il tuo tema mostra fuori da una pagina DXPR Builder, come in un menu o nel footer, seguono la larghezza fissa di Font Awesome 7. Per mantenere le vecchie larghezze anche lì, imposta --fa-width: auto sul loro contenitore.
  5. Svuota le cache. Esegui drush cr ed elimina ogni cache CDN o reverse proxy così i visitatori ricevono i nuovi fogli di stile e font.

Passi successivi