--- url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' title: 'Font Awesome 7 in DXPR Builder | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:58:04+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: "DXPR Builder werkt zijn meegeleverde Font Awesome Free-pictogrammen bij van versie 6.7.2 naar 7.3.1. Pagina's blijven werken zonder bewerkingen: elk pictogram op een opgeslagen pagina rendert nog steeds, in dezelfde grootte en positie. De pictogrammen zelf zijn hertekend, dus ze zien er iets anders uit. Deze pagina toont de wijziging en somt de weinige gevallen op die na het bijwerken een controle nodig hebben." tags: - 'Installeren en bijwerken' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+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: "DXPR Builder werkt zijn meegeleverde Font Awesome Free-pictogrammen bij van versie 6.7.2 naar 7.3.1. Pagina's blijven werken zonder bewerkingen: elk pictogram op een opgeslagen pagina rendert nog steeds, in dezelfde grootte en positie. De pictogrammen zelf zijn hertekend, dus ze zien er iets anders uit. Deze pagina toont de wijziging en somt de weinige gevallen op die na het bijwerken een controle nodig hebben." image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:58:04+0000' dateModified: '2026-10-24T09:09:48+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/nl/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' articleSection: 'Installeren en bijwerken' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7' description: "DXPR Builder werkt zijn meegeleverde Font Awesome Free-pictogrammen bij van versie 6.7.2 naar 7.3.1. Pagina's blijven werken zonder bewerkingen: elk pictogram op een opgeslagen pagina rendert nog steeds, in dezelfde grootte en positie. De pictogrammen zelf zijn hertekend, dus ze zien er iets anders uit. Deze pagina toont de wijziging en somt de weinige gevallen op die na het bijwerken een controle nodig hebben." breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Start here](/hc/documentation/learn-dxpr-builder/start-here) /[Installeren en bijwerken](/hc/documentation/learn-dxpr-builder/start-here/install) # Font Awesome 7 in DXPR Builder. Learn DXPR BuilderStart hereInstalleren en bijwerken ## In this guide Related guides - [Pictogrambibliotheken](/nl/hc/documentation/learn-dxpr-builder/customization/icon-libraries) - [Een pictogram toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/icon) - [DXPR Builder bijwerken](/nl/hc/documentation/learn-dxpr-builder/getting-started/updating) - [Wijzigingenlog](/nl/hc/documentation/learn-dxpr-builder/getting-started/changelog) DXPR Builder werkt zijn meegeleverde Font Awesome Free-pictogrammen bij van versie 6.7.2 naar 7.3.1. Pagina's blijven werken zonder bewerkingen: elk pictogram op een opgeslagen pagina rendert nog steeds, in dezelfde grootte en positie. De pictogrammen zelf zijn hertekend, dus ze zien er iets anders uit. Deze pagina toont de wijziging en somt de weinige gevallen op die na het bijwerken een controle nodig hebben. ## Wat er wijzigt op je pagina's - **Nieuwe pictogramontwerpen.** Font Awesome 7 tekent zijn pictogrammen opnieuw met zwaardere, rondere vormen. Regular-pictogrammen (omlijnd) krijgen dikkere lijnen. Merklogo's zijn bijna ongewijzigd. - **Dezelfde lay-out.** Font Awesome 7 geeft elk pictogram standaard een vaste breedte, wat smalle pictogrammen naar rechts zou schuiven. DXPR Builder behoudt het Font Awesome 6-gedrag op zijn pagina's en in de editor, zodat pictogrammen hun positie en spatiëring behouden. Enkele hertekende pictogrammen zijn iets smaller, zoals house en truck. Pictogrammen met de klasse `fa-fw`, zoals social links, behouden hun vaste breedte als voorheen. - **Dezelfde klassenamen.** Opgeslagen pagina's behouden hun pictogramklassen, zoals `fas fa-house`. Klassen uit Font Awesome 4 en 5 blijven werken via de compatibiliteitsstijlen, die nog steeds dezelfde 464 oude namen dekken. ## Voor en na Elke tegel toont één pictogram twee keer. Het grijze pictogram links is Font Awesome 6.7.2; het zwarte pictogram rechts is Font Awesome 7.3.1. ## Nieuwe pictogrammen De pictogramkiezer somt nu 1992 gratis pictogrammen op, tegen 1895 eerst. | Stijl | Font Awesome 6.7.2 | Font Awesome 7.3.1 | |---|---|---| | Effen | 1402 | 1422 | | Regular | 163 | 169 | | Merken | 495 | 572 | De 103 nieuwe pictogrammen omvatten merklogo's zoals Claude, Copilot, Gemini, Fediverse, Codeberg en Forgejo, en de sterrenbeelden. ## Hernoemde en verwijderde pictogrammen Vijf pictogrammen hebben nieuwe namen. Pagina's die de oude namen gebruiken tonen het pictogram nog steeds, omdat Font Awesome 7 ze nog accepteert. De pictogramkiezer biedt alleen de nieuwe namen. | Oude naam | Nieuwe naam | |---|---| | `user-large` | `user` | | `user-large-slash` | `user-slash` | | `headphones-simple` | `headphones` | | `handshake-simple` | `handshake` | | `handshake-simple-slash` | `handshake-slash` | Eén pictogram verlaat de gratis set: `vector-square`. Font Awesome 7 biedt hem alleen in zijn betaalde Pro-editie, dus een pagina die `fa-vector-square` gebruikt toont na de update geen pictogram. Vervang hem door een gratis pictogram zoals `draw-polygon` of `object-group`. ## Wat hetzelfde blijft - **Licentie.** Font Awesome Free behoudt dezelfde voorwaarden. De pictogrammen gebruiken CC BY 4.0, de lettertypen SIL OFL 1.1 en de code MIT. - **Bibliotheeknamen.** De Drupal-bibliotheek behoudt zijn machinenaam, `dxpr_builder/elements.font_awesome_6_free`, omdat opgeslagen pagina's en maatwerkcode ernaar verwijzen. Hij laadt nu Font Awesome 7. - **Browserondersteuning.** Font Awesome 7 levert alleen WOFF2-lettertypen. Elke browser die DXPR Builder ondersteunt leest WOFF2. ## Controleer je site na het bijwerken 1. **Zoek je inhoud op `fa-vector-square`** en vervang hem zoals hierboven beschreven. 2. **Controleer aangepaste thema-CSS die zelf Font Awesome-pictogrammen tekent.** Font Awesome 7 hernoemt zijn lettertypen naar “Font Awesome 7 Free” en “Font Awesome 7 Brands”. CSS die `font-family` instelt op “Font Awesome 6 Free” of “Font Awesome 6 Brands” samen met een `content`-codepunt toont het pictogram niet meer. Gebruik de nieuwe namen, of de custom properties `--fa-family-classic` en `--fa-family-brands` die Font Awesome 7 biedt. 3. **Controleer thema-markup die op `sr-only` vertrouwt.** Font Awesome 6 definieerde een klasse `sr-only` en Font Awesome 7 niet. Tekst die een thema ermee verborg wordt zichtbaar. Bootstrap 5-thema's kunnen in plaats daarvan `visually-hidden` gebruiken. 4. **Controleer themapictogrammen buiten DXPR Builder-inhoud.** Pictogrammen die je thema rendert buiten een DXPR Builder-pagina, zoals in een menu of footer, volgen de vaste breedte van Font Awesome 7. Om de oude breedtes ook daar te behouden, stel je `--fa-width: auto` in op hun container. 5. **Wis caches.** Draai `drush cr` en purge elke CDN- of reverse-proxy-cache zodat bezoekers de nieuwe stylesheets en lettertypen ontvangen. ## Wat nu? - [Pictogrambibliotheken](/nl/hc/documentation/learn-dxpr-builder/customization/icon-libraries): de pictogramsets die DXPR Builder meelevert en hoe je ze per rol beperkt. - [Een pictogram toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/icon): plaats en stijl pictogrammen op een pagina. - [DXPR Builder bijwerken](/nl/hc/documentation/learn-dxpr-builder/getting-started/updating): werk de module veilig bij. - [Wijzigingenlog](/nl/hc/documentation/learn-dxpr-builder/getting-started/changelog): wat er wijzigt in elke release.