--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/font-awesome-7' title: 'Font Awesome 7 en DXPR Builder | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:10:26+00:00' updated: '2026-10-24T19:36:26+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: '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.' tags: - 'Install and update' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T19:36:26+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Font Awesome 7 en DXPR Builder' description: '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.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:10:26+0000' dateModified: '2026-10-24T19:36:26+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/font-awesome-7' articleSection: 'Instalar y actualizar' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/font-awesome-7' description: '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.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Empieza aquí](/es/hc/documentation/learn-dxpr-builder/start-here) /[Instalar y actualizar](/es/hc/documentation/learn-dxpr-builder/start-here/install) # Font Awesome 7 en DXPR Builder. Aprende DXPR BuilderEmpieza aquíInstalar y actualizar ## En esta guía Guías relacionadas - [Bibliotecas de iconos](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/bibliotecas-iconos) - [Añadir un icono](/es/hc/documentacion/aprender-dxpr-builder/elementos/icono) - [Actualiza DXPR Builder](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/actualizar) - [Registro de cambios](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/registro-cambios) 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. ## 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? - [Bibliotecas de iconos](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/bibliotecas-iconos): los conjuntos de iconos que trae DXPR Builder y cómo restringirlos por rol. - [Añadir un icono](/es/hc/documentacion/aprender-dxpr-builder/elementos/icono): pon iconos en una página y dales estilo. - [Actualiza DXPR Builder](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/actualizar): actualiza el módulo con seguridad. - [Registro de cambios](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/registro-cambios): qué cambia en cada versión.