Font Awesome 7 en DXPR Builder.

Learn DXPR BuilderStart hereInstalleren en bijwerken

DXPR Builder actualiza sus iconos Font Awesome Free incluidos de la versión 6.7.2 a la 7.3.1. Las páginas siguen funcionando sin cambios: cada icono en una página guardada se sigue mostrando, en el mismo tamaño y posición. Los iconos mismos están redibujados, así que se ven algo distintos. Esta página muestra el cambio y lista los pocos casos que necesitan una comprobación tras actualizar.

Qué cambia en tus páginas

  • Diseños de iconos nuevos. Font Awesome 7 redibuja sus iconos con formas más gruesas y redondeadas. Los iconos Regular (contorno) reciben líneas más gruesas. Los logotipos de marcas casi no cambian.
  • Mismo diseño. Font Awesome 7 da a cada icono un ancho fijo por defecto, lo que movería iconos estrechos a la derecha. DXPR Builder conserva el comportamiento de Font Awesome 6 en sus páginas y en el editor, así los iconos conservan su posición y espaciado. Algunos iconos redibujados son algo más estrechos, como house y truck. Los iconos con la clase fa-fw, como enlaces sociales, mantienen ancho fijo como antes.
  • Mismos nombres de clase. Las páginas guardadas conservan sus clases de icono, como fas fa-house. Las clases de Font Awesome 4 y 5 siguen funcionando con los estilos de compatibilidad, que aún cubren los mismos 464 nombres viejos.

Antes y después

Cada mosaico muestra un icono dos veces. El icono gris a la izquierda es Font Awesome 6.7.2; el icono negro a la derecha es Font Awesome 7.3.1.

Cuadrícula de 64 iconos comunes de interfaz sólidos que compara Font Awesome 6 a la izquierda con Font Awesome 7 a la derecha

Cuadrícula de iconos estilo regular y logotipos de marcas populares que compara Font Awesome 6 con Font Awesome 7

Cuadrícula de los iconos usados en plantillas y contenido de demostración de DXPR Builder en Font Awesome 6 y Font Awesome 7

Iconos nuevos

El selector de iconos ahora lista 1992 iconos gratuitos, frente a 1895.

Estilo Font Awesome 6.7.2 Font Awesome 7.3.1
Solid 1402 1422
Regular 163 169
Brands 495 572

Los 103 iconos nuevos incluyen logotipos de marcas como Claude, Copilot, Gemini, Fediverse, Codeberg y Forgejo, y los signos del zodiaco.

Iconos renombrados y eliminados

Cinco iconos tienen nombres nuevos. Las páginas que usan los nombres viejos siguen mostrando el icono, porque Font Awesome 7 aún los acepta. El selector de iconos solo ofrece los nombres nuevos.

Nombre viejo Nombre nuevo
user-large user
user-large-slash user-slash
headphones-simple headphones
handshake-simple handshake
handshake-simple-slash handshake-slash

Un icono sale del conjunto gratuito: vector-square. Font Awesome 7 solo lo ofrece en su edición Pro de pago, así que una página que usa fa-vector-square no muestra ningún icono tras la actualización. Reemplázalo con un icono gratuito como draw-polygon o object-group.

Qué permanece igual

  • Licencia. Font Awesome Free conserva los mismos términos. Los iconos usan CC BY 4.0, las fuentes SIL OFL 1.1 y el código MIT.
  • Nombres de biblioteca. La biblioteca Drupal conserva su nombre máquina, dxpr_builder/elements.font_awesome_6_free, porque páginas guardadas y código personalizado la referencian. Ahora carga Font Awesome 7.
  • Soporte de navegadores. Font Awesome 7 solo distribuye fuentes WOFF2. Cada navegador que soporta DXPR Builder lee WOFF2.

Comprueba tu sitio tras actualizar

  1. Busca fa-vector-square en tu contenido y reemplázalo como se describe arriba.
  2. Comprueba CSS de tema personalizado que dibuja iconos Font Awesome por su cuenta. Font Awesome 7 renombra sus fuentes a "Font Awesome 7 Free" y "Font Awesome 7 Brands". CSS que pone font-family en "Font Awesome 6 Free" o "Font Awesome 6 Brands" junto a un punto de código content deja de mostrar el icono. Usa los nombres nuevos, o las propiedades personalizadas --fa-family-classic y --fa-family-brands que provee Font Awesome 7.
  3. Comprueba marcado de tema que depende de sr-only. Font Awesome 6 definía una clase sr-only y Font Awesome 7 no. Texto que un tema ocultaba con ella se vuelve visible. Temas Bootstrap 5 pueden usar visually-hidden.
  4. Comprueba iconos de tema fuera del contenido de DXPR Builder. Iconos que tu tema muestra fuera de una página DXPR Builder, como en un menú o pie, siguen el ancho fijo de Font Awesome 7. Para conservar los anchos viejos también allí, pon --fa-width: auto en su contenedor.
  5. Limpia cachés. Ejecuta drush cr y purga cualquier CDN o caché de proxy inverso para que las visitas reciban las nuevas hojas de estilo y fuentes.

¿Qué sigue?