Come utilizzare le icone di Google in HTML e CSS?

Le icone sono rappresentazioni visive di diverse azioni, programmi o file e possono svolgere un ruolo molto significativo nella progettazione del sito Web. Possono migliorare l'aspetto generale del sito Web e rivelarsi una buona fonte per attirare più pubblico sul tuo sito Web. Le icone forniscono una facile navigazione, quindi aumentando l'esperienza dell'utente. Esiste una vasta gamma di icone che puoi aggiungere al tuo sito Web, tuttavia, questo articolo è progettato per guidarti su come utilizzare le icone di Google in HTML e CSS.

Gli argomenti esplorati in questo articolo sono:

1. Quali sono le icone di Google?
2. Come aggiungere un'icona di Google?
3. Ridimensionare un'icona di Google
4. Modifica del colore di un'icona di Google

Cominciamo.

Quali sono le icone di Google?

Google offre un'enorme varietà di icone (un totale di 750) che sono considerate icone di progettazione del materiale. Queste icone sono semplici ma moderne e rappresentano azioni o oggetti comunemente usati. Ad esempio, un'icona della pattumiera rappresenta l'azione "Elimina". Queste icone sono supportate da tutti i browser attuali. Lo screenshot collegato di seguito mostra alcune delle icone di progettazione del materiale.

Ora che sappiamo quali sono le icone di Google, impariamo come aggiungerle alle pagine Web.

Come aggiungere un'icona di Google?

Ai fini dell'aggiunta di icone di progettazione del materiale di Google ai siti Web seguire i passaggi di seguito.

Passo 1
Il primo passo è aggiungere il collegamento della libreria di caratteri materiali-iconi nella sezione del file HTML. Ecco come lo fai.

Passo 2
Una volta aggiunto il collegamento della libreria materiale-icons, il passo successivo è aggiungere le "iconi materiali" di classe nel o tag della sezione e aggiungi anche il nome dell'icona.

Wifi

Esempio 1
In questo esempio, un'icona di impostazioni viene aggiunta nella pagina Web.

impostazioni

Produzione

Icona Impostazioni aggiunta correttamente.

Esempio 2
Nell'esempio seguente, un'icona di logout viene aggiunta nella pagina Web.

disconnettersi

Produzione

Icona di logout inserita correttamente.

È inoltre possibile modificare le dimensioni di queste icone di progettazione del materiale usando CSS. Esploriamolo in dettaglio.

Ridimensionare un'icona di Google

Puoi modificare le dimensioni delle icone di progettazione di materiale di Google in base al tuo desiderio utilizzando CSS. Segui i passaggi menzionati in questa sezione per ridimensionare l'icona di progettazione del materiale di Google.

Passo 1
Nel tag utilizzando la classe materiale-icons definire le dimensioni dell'icona, ad esempio.

Passo 2
Usa la stessa classe in Tag insieme al nome dell'icona.

impostazioni

Produzione

Dimensione dell'icona delle impostazioni modificata correttamente.

Oltre alle dimensioni, puoi anche modificare il colore delle icone di Google. Vediamo come è fatto.

Modifica del colore un'icona di Google

Ai fini di modificare il colore delle icone di progettazione del materiale di Google, seguire gli stessi passaggi menzionati nella sezione sopra con una leggera differenza che insieme alla dimensione del carattere puoi dover definire il colore usando la proprietà del colore di CSS.

Esempio
Supponiamo che tu voglia cambiare il colore delle Impostazioni in blu.

impostazioni

Produzione

Il colore dell'icona delle impostazioni è cambiato correttamente.

Conclusione

Per incorporare le icone di Google nelle tue pagine Web HTML devi aggiungere il collegamento della libreria di caratteri materiali-iconi nella sezione del tuo file HTML e quindi aggiungere i materiali di classe in o tag della sezione insieme al nome dell'icona. Puoi anche modificare le dimensioni e il colore delle icone attraverso CSS definendole nel tag usando la classe materiale-icons. Questo articolo discute come utilizzare le icone di Google in HTML e CSS in profondità con l'aiuto di esempi appropriati.