--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/personalizzazione/librerie-di-icone' title: 'Librerie di icone | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T03:03:40+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Il selettore di icone negli elementi Icon e Circle counter offre ogni set di icone registrato sul tuo sito. DXPR Builder include 14 set; moduli e temi possono aggiungerne altri con un file YAML. Questa pagina elenca i set inclusi, spiega come si caricano e mostra come aggiungerne uno. Per limitare i set visti da un ruolo, usa un profilo builder; vedi Profili utente.' 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: 'Librerie di icone' description: 'Il selettore di icone negli elementi Icon e Circle counter offre ogni set di icone registrato sul tuo sito. DXPR Builder include 14 set; moduli e temi possono aggiungerne altri con un file YAML. Questa pagina elenca i set inclusi, spiega come si caricano e mostra come aggiungerne uno. Per limitare i set visti da un ruolo, usa un profilo builder; vedi Profili utente.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T03:03:40+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/it/hc/documentazione/impara-dxpr-builder/personalizzazione/librerie-di-icone' articleSection: 'Adatta al tuo brand' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/personalizzazione/librerie-di-icone' description: 'Il selettore di icone negli elementi Icon e Circle counter offre ogni set di icone registrato sul tuo sito. DXPR Builder include 14 set; moduli e temi possono aggiungerne altri con un file YAML. Questa pagina elenca i set inclusi, spiega come si caricano e mostra come aggiungerne uno. Per limitare i set visti da un ruolo, usa un profilo builder; vedi Profili utente.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/it' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: it --- [Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Gestisci il sito](/it/hc/documentation/learn-dxpr-builder/manage) /[Adatta al tuo brand](/it/hc/documentation/learn-dxpr-builder/customization) # Librerie di icone. Impara DXPR BuilderGestisci il sitoAdatta al tuo brand ## In questa guida Guide correlate - [Set di icone personalizzati](/it/hc/documentazione/impara-dxpr-builder/sviluppo/set-di-icone) - [Aggiungere un’icona](/it/hc/documentazione/impara-dxpr-builder/elementi/icona) Il selettore di icone negli elementi **Icon** e **Circle counter** offre ogni set di icone registrato sul tuo sito. DXPR Builder include 14 set; moduli e temi possono aggiungerne altri con un file YAML. Questa pagina elenca i set inclusi, spiega come si caricano e mostra come aggiungerne uno. Per limitare i set visti da un ruolo, usa un profilo builder; vedi [Profili utente](/it/hc/documentazione/impara-dxpr-builder/amministrazione/gestione-profili-utente). ## Set inclusi I set sono registrati in `dxpr_builder.dxpr_icon_sets.yml`: | Chiave | Etichetta nel selettore | Prefisso di classe | Libreria | |---|---|---|---| | `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` | Il selettore non offre il set `fa`, perché non ha elenco di icone. Fa caricare la libreria Font Awesome alle icone salvate con la vecchia classe `fa`. Le pagine salvate con i vecchi nomi di libreria Font Awesome ricevono anche il foglio di stile `dxpr_builder/elements.font_awesome_v4_shims`, così le loro icone continuano a mostrarsi. Tutti i set Font Awesome caricano Font Awesome Free 7. La libreria mantiene il nome macchina della versione 6, perché pagine salvate e codice personalizzato vi fanno riferimento. [Font Awesome 7 in DXPR Builder](/it/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7) elenca cosa è cambiato. ## Come il selettore e le pagine caricano le icone Il menu a discesa dei set inizia con **All icon sets**, poi elenca ogni set registrato con un elenco di icone. I 13 set inclusi oltre a `fa` hanno elenchi integrati, quindi un sito con solo DXPR Builder mostra 14 voci. Un set da un altro modulo o tema richiede un elenco `icons` nel suo YAML per comparire. Quando un editor sceglie un’icona, l’elemento memorizza le classi dell’icona, come `bi bi-star`, e il nome della sua libreria. I visitatori scaricano poi solo i font di icone usati dalla loro pagina. Nell’editor, ET Line, Pixeden e Glyphicon si caricano con l’editor stesso; il selettore carica i fogli di stile degli altri set all’apertura. Come gli editor scelgono e stilizzano un’icona è in [Aggiungere un’Icona](/it/hc/documentazione/impara-dxpr-builder/elementi/icona). ## Limita i set di icone per ruolo Ogni profilo builder ha un gruppo **Icon sets** con un riquadro per set e un riquadro **Check/Uncheck all Icon sets**. Configuralo in **DXPR Studio** > **DXPR Builder** > **User Profiles**; [Profili utente](/it/hc/documentazione/impara-dxpr-builder/amministrazione/gestione-profili-utente) ha i passaggi. Come si comporta il gruppo: - Con **Check/Uncheck all Icon sets** spuntato, il ruolo vede ogni set, inclusi i set aggiunti dopo. - Senza spunta, il ruolo vede solo i set spuntati. Un nuovo profilo inizia così, con ogni set spuntato, quindi un set aggiunto dopo resta nascosto finché non lo spunti. - Senza spunta e senza set spuntati, il selettore è vuoto. - Le icone già su una pagina continuano a mostrarsi. Il profilo cambia solo ciò che offre il selettore. ## Aggiungi un set di icone Un set di icone è una voce YAML più una libreria Drupal. DXPR Builder legge `*.dxpr_icon_sets.yml` da ogni modulo e tema installato. Il riferimento alle proprietà e l’hook alter sono in [Set di icone personalizzati](/it/hc/documentazione/impara-dxpr-builder/sviluppo/set-di-icone). 1. Crea `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` è relativo alla cartella del modulo e si carica nell’editor. Ogni icona è il prefisso più una classe che inizia con il prefisso e un trattino. 2. Dichiara la libreria in `mymodule.libraries.yml`. Le pagine dei visitatori la caricano: ```yaml brand_icons: css: theme: css/brand-icons.css: {} ``` 3. Svuota le cache con `drush cr`. 4. Spunta il nuovo set in ogni profilo builder senza **Check/Uncheck all Icon sets** spuntato. 5. Apri le impostazioni di un elemento **Icon** e scegli **Brand icons** nel menu a discesa dei set. Un modulo personalizzato può anche rimuovere un set dal selettore con un hook alter; il codice è in [Riferimento API hook](/it/hc/documentazione/impara-dxpr-builder/sviluppo/api-hook#hook_dxpr_builder_icon_sets_alter). Le icone di un set incluso continuano comunque a caricarsi nelle pagine salvate. Le icone di un set personalizzato rimosso smettono di caricare il loro CSS, perché DXPR Builder collega solo una libreria nominata da un set registrato. ## Se manca un set di icone - **Un nuovo set non è nel menu a discesa.** Il suo YAML non ha elenco `icons`, oppure la cache contiene ancora il vecchio registro. Aggiungi l’elenco ed esegui `drush cr`. - **Un set manca solo ad alcuni editor.** Il loro profilo builder non lo spunta. Spuntalo in **Icon sets** in `/admin/dxpr_studio/dxpr_builder/profile`. - **Le icone si vedono nell’editor ma non per i visitatori.** L’editor carica il file `css` del set, ma le pagine dei visitatori caricano la sua `library`. Verifica che `library` nomini una libreria in `mymodule.libraries.yml` contenente il file CSS. ## Prossimi passi - [Set di icone personalizzati](/it/hc/documentazione/impara-dxpr-builder/sviluppo/set-di-icone): il riferimento alle proprietà YAML e l’hook alter. - [Aggiungere un’Icona](/it/hc/documentazione/impara-dxpr-builder/elementi/icona): le impostazioni dell’elemento Icon.