Librerie di icone.

Impara DXPR BuilderGestisci il sitoAdatta al tuo brand

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.

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 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.

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 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.

Crea mymodule/mymodule.dxpr_icon_sets.yml:
```
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.
Dichiara la libreria in mymodule.libraries.yml. Le pagine dei visitatori la caricano:
```
brand_icons:
  css:
    theme:
      css/brand-icons.css: {}
```
Svuota le cache con drush cr.
Spunta il nuovo set in ogni profilo builder senza Check/Uncheck all Icon sets spuntato.
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. 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: il riferimento alle proprietà YAML e l’hook alter.
Aggiungere un’Icona: le impostazioni dell’elemento Icon.