Font Awesome 7 dans DXPR Builder.

Apprendre DXPR BuilderCommencer iciInstaller et mettre à jour

DXPR Builder fait passer ses icônes Font Awesome Free intégrées de la version 6.7.2 à la 7.3.1. Les pages continuent de fonctionner sans aucune modification : chaque icône d’une page enregistrée s’affiche toujours, à la même taille et au même endroit. Les icônes elles-mêmes sont redessinées, donc légèrement différentes. Cette page présente le changement et liste les quelques cas à vérifier après la mise à jour.

Ce qui change sur vos pages

  • Nouveaux dessins d’icônes. Font Awesome 7 redessine ses icônes avec des formes plus épaisses et plus rondes. Les icônes Regular (contour) gagnent des traits plus épais. Les logos de marques ne changent quasiment pas.
  • Même mise en page. Font Awesome 7 donne à chaque icône une chasse fixe par défaut, ce qui décalerait les icônes étroites vers la droite. DXPR Builder conserve le comportement de Font Awesome 6 sur ses pages et dans l’éditeur, donc les icônes gardent leur position et leur espacement. Quelques icônes redessinées sont légèrement plus étroites, comme house et truck. Les icônes avec la classe fa-fw, comme les liens sociaux, gardent une chasse fixe comme avant.
  • Mêmes noms de classes. Les pages enregistrées gardent leurs classes d’icônes, comme fas fa-house. Les classes de Font Awesome 4 et 5 continuent de fonctionner grâce aux styles de compatibilité, qui couvrent toujours les mêmes 464 anciens noms.

Avant et après

Chaque vignette montre une icône deux fois. L’icône grise de gauche vient de Font Awesome 6.7.2 ; l’icône noire de droite vient de Font Awesome 7.3.1.

Grille de 64 icônes d’interface pleines courantes comparant Font Awesome 6 à gauche et Font Awesome 7 à droite

Grille d’icônes de style Regular et de logos de marques populaires comparant Font Awesome 6 et Font Awesome 7

Grille des icônes utilisées dans les modèles DXPR Builder et le contenu de démo en Font Awesome 6 et Font Awesome 7

Nouvelles icônes

Le sélecteur d’icônes liste désormais 1 992 icônes gratuites, contre 1 895 avant.

Style Font Awesome 6.7.2 Font Awesome 7.3.1
Solid 1 402 1 422
Regular 163 169
Brands 495 572

Les 103 nouvelles icônes comprennent des logos de marques comme Claude, Copilot, Gemini, Fediverse, Codeberg et Forgejo, ainsi que les signes du zodiaque.

Icônes renommées et supprimées

Cinq icônes ont de nouveaux noms. Les pages qui utilisent les anciens noms continuent d’afficher l’icône, car Font Awesome 7 les accepte toujours. Le sélecteur d’icônes ne propose que les nouveaux noms.

Ancien nom Nouveau nom
user-large user
user-large-slash user-slash
headphones-simple headphones
handshake-simple handshake
handshake-simple-slash handshake-slash

Une icône quitte l’ensemble gratuit : vector-square. Font Awesome 7 ne la propose que dans son édition payante Pro, donc une page qui utilise fa-vector-square n’affiche aucune icône après la mise à jour. Remplacez-la par une icône gratuite comme draw-polygon ou object-group.

Ce qui ne change pas

  • Licence. Font Awesome Free garde les mêmes conditions. Les icônes sont sous CC BY 4.0, les polices sous SIL OFL 1.1 et le code sous MIT.
  • Noms de bibliothèques. La bibliothèque Drupal garde son nom machine, dxpr_builder/elements.font_awesome_6_free, car les pages enregistrées et le code sur mesure s’y réfèrent. Elle charge désormais Font Awesome 7.
  • Prise en charge des navigateurs. Font Awesome 7 ne livre que des polices WOFF2. Chaque navigateur pris en charge par DXPR Builder lit le WOFF2.

Vérifiez votre site après la mise à jour

  1. Recherchez dans votre contenu fa-vector-square et remplacez-la comme décrit ci-dessus.
  2. Vérifiez le CSS sur mesure du thème qui dessine lui-même des icônes Font Awesome. Font Awesome 7 renomme ses polices en « Font Awesome 7 Free » et « Font Awesome 7 Brands ». Le CSS qui règle font-family sur « Font Awesome 6 Free » ou « Font Awesome 6 Brands » avec un point de code content n’affiche plus l’icône. Utilisez les nouveaux noms, ou les propriétés personnalisées --fa-family-classic et --fa-family-brands fournies par Font Awesome 7.
  3. Vérifiez le balisage du thème qui repose sur sr-only. Font Awesome 6 définissait une classe sr-only, pas Font Awesome 7. Le texte qu’un thème masquait ainsi devient visible. Les thèmes Bootstrap 5 peuvent utiliser visually-hidden à la place.
  4. Vérifiez les icônes du thème hors du contenu DXPR Builder. Les icônes que votre thème affiche hors d’une page DXPR Builder, comme dans un menu ou un pied de page, suivent la chasse fixe de Font Awesome 7. Pour garder aussi les anciennes chasses, définissez --fa-width: auto sur leur conteneur.
  5. Videz les caches. Exécutez drush cr et purgez tout cache de CDN ou de proxy inverse pour que les visiteurs reçoivent les nouvelles feuilles de style et polices.

Et ensuite ?