Icona Modelli CSS

Template CSS funzionali per icone stilizzati per schede e controlli cliccabili

Ogni icona richiede alcune decisioni precise: le dimensioni, la forma retrostante e ciò che accade al passaggio del cursore. I template CSS per icone contengono già queste scelte. I blocchi spaziano dalle schede dei servizi e le righe di contatto fino ai pulsanti con icona. Classi condivise stilizzano ogni elemento di un gruppo in modo coerente, così che una nuova scheda assuma automaticamente le stesse dimensioni e lo stesso colore.

Regole integrate nelle schede tipiche

I blocchi di questa categoria presentano solitamente regole come queste:

1. larghezza e altezza uniformi per ogni icona del gruppo, per evitare che qualcuna appaia involontariamente più grande;
2. un cerchio pieno o con bordo dietro al simbolo, oppure un quadrato con angoli arrotondati;
3. una spaziatura fissa tra l'icona e la sua intestazione che mantiene le righe allineate anche quando i titoli vanno a capo;
4. un colore d'accento collegato alla tavolozza del tema, in modo che l'intero set si aggiorni insieme.

Queste regole valgono allo stesso modo per le icone SVG e per i glifi dei font di icone. In una riga di contatti, tutte le icone dei canali condividono le medesime dimensioni. La voce per l'email può comunque ricevere un accento più vivace se rappresenta il canale principale. Anche lo spessore del tratto è fondamentale, poiché le icone a linea sottile risultano poco visibili sugli schermi dei telefoni molto prima di quelle con riempimento.

Celle ripetute e stati cliccabili

In Nicepage, il componente Grid Repeater Element ripete il layout e lo stile delle sue celle. Ogni colonna conserva la propria icona e il proprio testo. Se modifichi il colore del cerchio in una cella, le altre si aggiorneranno di conseguenza. Una griglia di servizi statica richiede raramente altro. Le icone cliccabili per la ricerca, la condivisione o la chiusura di un pannello sono diverse, e il template dovrebbe definire questi stati:

1. un aspetto predefinito sobrio rispetto al testo circostante;
2. uno stato hover che modifica colore o sfondo al passaggio del cursore;
3. uno stato attivo o di focus per il clic vero e proprio e per chi naviga da tastiera;
4. uno stato evidenziato che contrassegna la scelta corrente, come un filtro selezionato.

Ricolorare interi gruppi contemporaneamente

Con i colori del tema nelle impostazioni del sito di Nicepage, la modifica di un accento aggiorna ogni icona che lo impiega su tutte le pagine del progetto. È consigliabile escludere da questo accento i simboli di avviso e conferma, facendoli corrispondere ai vicini per dimensione ma assegnando loro un colore dedicato. Le dimensioni possono variare anche per modalità responsive, riducendo un grande simbolo decorativo sugli smartphone. Quando i controlli visivi non bastano, Custom CSS Code permette di aggiungere una regola a un singolo elemento, a una pagina specifica o all'intero sito.

Il template di una griglia di servizi può funzionare bene con un unico stile di icona statico. Per pulsanti e selettori, verifica gli stati prima della tavolozza, poiché un controllo che non mostra alcuna reazione al clic appare malfunzionante.