--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/bibliotheques-d-icones' title: 'Bibliothèques d’icônes | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T10:59:45+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Le sélecteur d’icônes des éléments Icon et Circle counter propose chaque jeu d’icônes enregistré sur votre site. DXPR Builder livre 14 jeux ; modules et thèmes peuvent en ajouter avec un fichier YAML. Cette page liste les jeux livrés, explique comment ils se chargent, et montre comment en ajouter un. Pour limiter les jeux vus par un rôle, utilisez un profil du builder ; voir Profils d’utilisateur.' tags: - 'Match your brand' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Bibliothèques d’icônes' description: 'Le sélecteur d’icônes des éléments Icon et Circle counter propose chaque jeu d’icônes enregistré sur votre site. DXPR Builder livre 14 jeux ; modules et thèmes peuvent en ajouter avec un fichier YAML. Cette page liste les jeux livrés, explique comment ils se chargent, et montre comment en ajouter un. Pour limiter les jeux vus par un rôle, utilisez un profil du builder ; voir Profils d’utilisateur.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T10:59:45+0000' dateModified: '2026-10-24T17:19:22+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/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/bibliotheques-d-icones' articleSection: 'Aux couleurs de votre marque' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/bibliotheques-d-icones' description: 'Le sélecteur d’icônes des éléments Icon et Circle counter propose chaque jeu d’icônes enregistré sur votre site. DXPR Builder livre 14 jeux ; modules et thèmes peuvent en ajouter avec un fichier YAML. Cette page liste les jeux livrés, explique comment ils se chargent, et montre comment en ajouter un. Pour limiter les jeux vus par un rôle, utilisez un profil du builder ; voir Profils d’utilisateur.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Gérer le site](/fr/hc/documentation/learn-dxpr-builder/manage) /[Aux couleurs de votre marque](/fr/hc/documentation/learn-dxpr-builder/customization) # Bibliothèques d’icônes. Apprendre DXPR BuilderGérer le siteAux couleurs de votre marque ## Dans ce guide Guides associés - [Jeux d’icônes personnalisés](/fr/hc/documentation/apprendre-dxpr-builder/developpement/jeux-d-icones) - [Ajouter une icône](/fr/hc/documentation/apprendre-dxpr-builder/elements/icone) Le sélecteur d’icônes des éléments **Icon** et **Circle counter** propose chaque jeu d’icônes enregistré sur votre site. DXPR Builder livre 14 jeux ; modules et thèmes peuvent en ajouter avec un fichier YAML. Cette page liste les jeux livrés, explique comment ils se chargent, et montre comment en ajouter un. Pour limiter les jeux vus par un rôle, utilisez un profil du builder ; voir [Profils d’utilisateur](/fr/hc/documentation/apprendre-dxpr-builder/administration/profils-d-utilisateurs-admin). ## Jeux d’icônes livrés Les jeux sont enregistrés dans `dxpr_builder.dxpr_icon_sets.yml` : | Clé | Libellé dans le sélecteur | Préfixe de classe | Bibliothèque | |---|---|---|---| | `bi` | Bootstrap Icons | `bi` | `dxpr_builder/elements.bootstrap_icons` | | `et` | ET Line Icons | `et` | `dxpr_builder/elements.et_line_font` | | `fab` | Font Awesome Free Brands | `fab` | `dxpr_builder/elements.font_awesome_6_free` | | `far` | Font Awesome Free Regular | `far` | `dxpr_builder/elements.font_awesome_6_free` | | `fas` | Font Awesome Free Solid | `fas` | `dxpr_builder/elements.font_awesome_6_free` | | `glyphicon` | Glyphicon Halflings | `glyphicon` | `dxpr_builder/elements.glyphicons_halflings` | | `pe` | Pixeden Line Icons | `pe` | `dxpr_builder/elements.pe_icon_7_stroke` | | `ph` | Phosphor Icons Regular | `ph` | `dxpr_builder/elements.phosphor_icons` | | `ph_bold` | Phosphor Icons Bold | `ph-bold` | `dxpr_builder/elements.phosphor_icons_bold` | | `ph_duotone` | Phosphor Icons Duotone | `ph-duotone` | `dxpr_builder/elements.phosphor_icons_duotone` | | `ph_fill` | Phosphor Icons Fill | `ph-fill` | `dxpr_builder/elements.phosphor_icons_fill` | | `ph_light` | Phosphor Icons Light | `ph-light` | `dxpr_builder/elements.phosphor_icons_light` | | `ph_thin` | Phosphor Icons Thin | `ph-thin` | `dxpr_builder/elements.phosphor_icons_thin` | | `fa` | Font Awesome (v4 compatibility) | `fa` | `dxpr_builder/elements.font_awesome_6_free` | Le sélecteur ne propose pas le jeu `fa`, car il n’a pas de liste d’icônes. Il fait charger aux icônes enregistrées avec l’ancienne classe `fa` la bibliothèque Font Awesome. Les pages enregistrées avec les anciens noms de bibliothèque Font Awesome reçoivent aussi la feuille de style `dxpr_builder/elements.font_awesome_v4_shims`, pour que leurs icônes continuent de s’afficher. Tous les jeux Font Awesome chargent Font Awesome Free 7. La bibliothèque garde son nom machine de version 6, car les pages enregistrées et le code personnalisé s’y réfèrent. [Font Awesome 7 dans DXPR Builder](/fr/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7) liste ce qui a changé. ## Comment le sélecteur et les pages chargent les icônes Le menu déroulant des jeux commence par **All icon sets**, puis liste chaque jeu enregistré qui a une liste d’icônes. Les 13 jeux livrés autres que `fa` ont des listes intégrées, donc un site avec DXPR Builder seul montre 14 entrées. Un jeu d’un autre module ou thème a besoin d’une liste `icons` dans son YAML pour apparaître. Quand un contributeur choisit une icône, l’élément stocke les classes de l’icône, comme `bi bi-star`, et le nom de sa bibliothèque. Les visiteurs ne téléchargent alors que les polices d’icônes utilisées par leur page. Dans l’éditeur, ET Line, Pixeden et Glyphicon se chargent avec l’éditeur lui-même ; le sélecteur charge les feuilles de style des autres jeux à son ouverture. Le choix et le style d’une icône par les contributeurs sont sur [Ajouter une icône](/fr/hc/documentation/apprendre-dxpr-builder/elements/icone). ## Limiter les jeux d’icônes par rôle Chaque profil du builder a un groupe **Icon sets** avec une case par jeu et une case **Check/Uncheck all Icon sets**. Configurez-le sous **DXPR Studio** > **DXPR Builder** > **User Profiles** ; [Profils d’utilisateur](/fr/hc/documentation/apprendre-dxpr-builder/administration/profils-d-utilisateurs-admin) a les étapes. Fonctionnement du groupe : - Avec **Check/Uncheck all Icon sets** coché, le rôle voit chaque jeu, y compris les jeux ajoutés plus tard. - Sans la case cochée, le rôle ne voit que les jeux cochés. Un nouveau profil démarre ainsi, avec chaque jeu coché, donc un jeu ajouté plus tard reste masqué jusqu’à ce que vous le cochiez. - Sans la case cochée et sans jeu coché, le sélecteur est vide. - Les icônes déjà sur une page continuent de s’afficher. Le profil ne change que ce que le sélecteur propose. ## Ajouter un jeu d’icônes Un jeu d’icônes est une entrée YAML plus une bibliothèque Drupal. DXPR Builder lit `*.dxpr_icon_sets.yml` depuis chaque module et thème installé. La référence des propriétés et le hook de modification sont sur [Jeux d’icônes personnalisés](/fr/hc/documentation/apprendre-dxpr-builder/developpement/jeux-d-icones). 1. Créez `mymodule/mymodule.dxpr_icon_sets.yml` : ```yaml brand: label: 'Brand icons' prefix: brand css: css/brand-icons.css library: mymodule/brand_icons icons: - 'brand brand-logo' - 'brand brand-arrow' ``` `css` est relatif au dossier du module et se charge dans l’éditeur. Chaque icône est le préfixe plus une classe qui commence par le préfixe et un trait d’union. 2. Déclarez la bibliothèque dans `mymodule.libraries.yml`. Les pages des visiteurs la chargent : ```yaml brand_icons: css: theme: css/brand-icons.css: {} ``` 3. Videz les caches avec `drush cr`. 4. Cochez le nouveau jeu dans chaque profil du builder qui n’a pas **Check/Uncheck all Icon sets** coché. 5. Ouvrez les réglages d’un élément **Icon** et choisissez **Brand icons** dans le menu déroulant des jeux. Un module personnalisé peut aussi retirer un jeu du sélecteur avec un hook de modification ; le code est sur [Référence de l’API des hooks](/fr/hc/documentation/apprendre-dxpr-builder/developpement/api-des-hooks#hook_dxpr_builder_icon_sets_alter). Les icônes d’un jeu livré continuent de se charger sur les pages enregistrées. Les icônes d’un jeu personnalisé retiré cessent de charger leur CSS, car DXPR Builder n’attache qu’une bibliothèque nommée par un jeu enregistré. ## Si un jeu d’icônes manque - **Un nouveau jeu n’est pas dans le menu déroulant.** Son YAML n’a pas de liste `icons`, ou le cache garde l’ancien registre. Ajoutez la liste et exécutez `drush cr`. - **Un jeu manque seulement chez certains contributeurs.** Leur profil du builder ne le coche pas. Cochez-le sous **Icon sets** sous `/admin/dxpr_studio/dxpr_builder/profile`. - **Les icônes s’affichent dans l’éditeur mais pas pour les visiteurs.** L’éditeur charge le fichier `css` du jeu, mais les pages des visiteurs chargent sa `library`. Vérifiez que `library` nomme une bibliothèque dans `mymodule.libraries.yml` qui contient le fichier CSS. ## Et ensuite ? - [Jeux d’icônes personnalisés](/fr/hc/documentation/apprendre-dxpr-builder/developpement/jeux-d-icones) : la référence des propriétés YAML et le hook de modification. - [Ajouter une icône](/fr/hc/documentation/apprendre-dxpr-builder/elements/icone) : les réglages de l’élément Icon.