--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' title: 'Font Awesome 7 in DXPR Builder | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'What changes on your site when DXPR Builder moves to Font Awesome 7' 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-23T14:31:17+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 in DXPR Builder' description: 'What changes on your site when DXPR Builder moves to Font Awesome 7' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+0000' dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' articleSection: 'Install and update' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' description: 'What changes on your site when DXPR Builder moves to Font Awesome 7' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Start here](/hc/documentation/learn-dxpr-builder/start-here) /[Install and update](/hc/documentation/learn-dxpr-builder/start-here/install) # Font Awesome 7 in DXPR Builder. What changes on your site when DXPR Builder moves to Font Awesome 7 Learn DXPR BuilderStart hereInstall and update ## In this guide Related guides - [Icon libraries](/hc/documentation/learn-dxpr-builder/customization/icon-libraries) - [Icon](/hc/documentation/learn-dxpr-builder/elements/icon) - [Updating](/hc/documentation/learn-dxpr-builder/getting-started/updating) - [Changelog](/hc/documentation/learn-dxpr-builder/getting-started/changelog) DXPR Builder updates its bundled Font Awesome Free icons from version 6.7.2 to 7.3.1. Pages keep working without any edits: every icon on a saved page still renders, in the same size and position. The icons themselves are redrawn, so they look slightly different. This page shows the change and lists the few cases that need a check after updating. ## What changes on your pages - **New icon designs.** Font Awesome 7 redraws its icons with heavier, rounder shapes. Regular (outline) icons get thicker lines. Brand logos are almost unchanged. - **Same layout.** Font Awesome 7 gives every icon a fixed width by default, which would move narrow icons to the right. DXPR Builder keeps the Font Awesome 6 behaviour on its pages and in the editor, so icons keep their position and spacing. A few redrawn icons are slightly narrower, such as house and truck. Icons with the `fa-fw`class, such as social links, stay fixed width as before. - **Same class names.** Saved pages keep their icon classes, such as `fas fa-house`. Classes from Font Awesome 4 and 5 keep working through the compatibility styles, which still cover the same 464 old names. ## Before and after Each tile shows one icon twice. The grey icon on the left is Font Awesome 6.7.2; the black icon on the right is Font Awesome 7.3.1. ## New icons The icon picker now lists 1992 free icons, up from 1895. | Style | Font Awesome 6.7.2 | Font Awesome 7.3.1 | |---|---|---| | Solid | 1402 | 1422 | | Regular | 163 | 169 | | Brands | 495 | 572 | The 103 new icons include brand logos such as Claude, Copilot, Gemini, Fediverse, Codeberg and Forgejo, and the zodiac signs. ## Renamed and removed icons Five icons have new names. Pages that use the old names keep showing the icon, because Font Awesome 7 still accepts them. The icon picker offers the new names only. | Old name | New name | |---|---| | `user-large` | `user` | | `user-large-slash` | `user-slash` | | `headphones-simple` | `headphones` | | `handshake-simple` | `handshake` | | `handshake-simple-slash` | `handshake-slash` | One icon leaves the free set: `vector-square`. Font Awesome 7 only offers it in its paid Pro edition, so a page that uses `fa-vector-square` shows no icon after the update. Replace it with a free icon such as `draw-polygon` or `object-group`. ## What stays the same - **Licence.** Font Awesome Free keeps the same terms. The icons use CC BY 4.0, the fonts SIL OFL 1.1 and the code MIT. - **Library names.** The Drupal library keeps its machine name, `dxpr_builder/elements.font_awesome_6_free`, because saved pages and custom code refer to it. It now loads Font Awesome 7. - **Browser support.** Font Awesome 7 only ships WOFF2 fonts. Every browser DXPR Builder supports reads WOFF2. ## Check your site after updating 1. **Search your content for `fa-vector-square`** and replace it as described above. 2. **Check custom theme CSS that draws Font Awesome icons itself.**Font Awesome 7 renames its fonts to "Font Awesome 7 Free" and "Font Awesome 7 Brands". CSS that sets `font-family` to "Font Awesome 6 Free" or "Font Awesome 6 Brands" together with a `content` code point stops showing the icon. Use the new names, or the `--fa-family-classic` and `--fa-family-brands` custom properties that Font Awesome 7 provides. 3. **Check theme markup that relies on `sr-only`.** Font Awesome 6 defined an `sr-only` class and Font Awesome 7 does not. Text a theme hid with it becomes visible. Bootstrap 5 themes can use `visually-hidden` instead. 4. **Check theme icons outside DXPR Builder content.** Icons that your theme renders outside a DXPR Builder page, such as in a menu or footer, follow Font Awesome 7's fixed width. To keep the old widths there too, set `--fa-width: auto` on their container. 5. **Clear caches.** Run `drush cr` and purge any CDN or reverse proxy cache so visitors receive the new style sheets and fonts. ## What's next? - [Icon libraries](/hc/documentation/learn-dxpr-builder/customization/icon-libraries): the icon sets DXPR Builder ships and how to restrict them per role. - [Adding an icon](/hc/documentation/learn-dxpr-builder/elements/icon): place and style icons on a page. - [Updating DXPR Builder](/hc/documentation/learn-dxpr-builder/getting-started/updating): update the module safely. - [Changelog](/hc/documentation/learn-dxpr-builder/getting-started/changelog): what changes in each release.