Lista di vantaggi con icone (check) in HTML e CSS
Scrivi un elemento per riga. Per avere titolo e descrizione, separali con |. Scegli l'icona, i colori e le colonne.
Come si usaVantaggi che si leggono a colpo d'occhio
Disponibile in: 
Lista di vantaggi con icone (check) in HTML e CSS: a cosa serve
Trasforma la lista dei vantaggi del tuo prodotto o servizio in una lista con icone: check, check nel cerchio, freccia, stella, cuore o fulmine, con o senza cerchio di sfondo, su una o due colonne e nel colore del tuo brand. Ogni elemento può avere titolo e descrizione, separati da |.
L'icona arriva dal CSS, con un piccolo SVG usato come maschera e colorato dalla variabile --cor-icone, quindi l'HTML resta una normale lista, che Google e gli screen reader capiscono, e cambiare l'icona di tutti gli elementi significa modificare una riga.
Come si usa
- Scrivi gli elementi, uno per riga.
- Scegli l'icona, le colonne e il colore.
- Copia il codice nel tuo sito.
Quando usarlo
- Sezione vantaggi della home page.
- Lista di ciò che è incluso in un piano.
- Pagina di vendita di un servizio.
Domande frequenti
Perché l'icona arriva dal CSS?
Perché così l'HTML resta pulito, una normale lista con li, e l'icona è solo decorazione: lo screen reader legge solo il testo dell'elemento, e cambi l'icona di tutti gli elementi modificando una riga di CSS.
Come funziona l'icona senza immagine?
Ogni elemento ha un ::before con un piccolo SVG usato come maschera (mask-image) e colorato con il colore che hai scelto. Funziona in tutti i browser attuali e il colore si cambia con la variabile --cor-icone.
Dove usare la lista di vantaggi?
Nella sezione vantaggi della home page, nella descrizione di un servizio, accanto al prezzo di un piano e nelle pagine di vendita. Inizia ogni elemento dal risultato per il cliente, non dalla caratteristica.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.