In questa lezione vedremo come aggiungere le icons CSS nei nostri siti web e dare anche una formattazione opportuna con i fogli di stile.
Ci sono vari metodi per inserire delle icone nei siti web, ma una pratica molto comune è quella di utilizzare una libreria esterna.
Una delle più utilizzate è la libreria Font Awesome.
Icons CSS – come utilizzare le icone nelle pagine web
Come prima cosa occorre include il collegamento alla CDN.
Di seguito indico il link da includere nella sezione head della pagina html:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">Dopo, nel punto della pagina desiderato si inserisce il codice html dell’icona scelta sul sito ufficiale: fontawesome.
Ecco un esempio che mostra come inserire delle icons CSS che nel nostro caso sono delle frecce di vari tipi:
<body>
<i class="fas fa-arrow-circle-right"></i>
<i class="far fa-arrow-alt-circle-right"></i>
<i class="fas fa-long-arrow-alt-right"></i>
<i class="fas fa-angle-right"></i>
</body>Di seguito il risultato visualizzato nel browser delle nostre icons CSS:
In definitiva le classi specificate all’interno del tag i, richiamano uno stile di icona incluso nel file all.min.css, a cui ci siamo collegati tramite cdn.
Possiamo anche dare uno stile alle icone, impostando ad esempio un colore di sfondo, una dimensione del testo, uno stile di carattere ed altre caratteristiche tipiche dei CSS.
Nel prossimo paragrafo vedremo dunque un esempio pratico.
Esempio formattazione icone CSS
In questo esempio di utilizzo delle icons CSS, formatteremo alcune icone a piacere dando un colore ed una dimensione del testo.
Nella pagina html inserisco le icone dell’esempio precedente ed aggiungo una classe che vado a definire poi nel foglio di stile.
Questo dunque il codice html di esempio è questo:
<body>
<i class="fas fa-arrow-circle-right yellow"></i>
<i class="far fa-arrow-alt-circle-right red"></i>
<i class="fas fa-long-arrow-alt-right blue"></i>
<i class="fas fa-angle-right green"></i>
</body>Questo invece il CSS:
.yellow {
color: yellow;
font-size: 20px;
}
.red {
color: red;
font-size: 24px;
}
.blue {
color: blue;
font-size: 28px;
}
.green {
color: green;
font-size: 40px;
}
Chiaramente il CSS deve essere opportunamente collegato alla pagina html.
Il risultato ottenuto sarà quindi come quello dell’immagine sotto:
In questa lezione abbiamo visto dei semplici esempi sull’utilizzo delle icons CSS, nelle prossime lezioni vedremo tanti altri esempi pratici.
Alcuni link utili
Fogli di stile interni, esterni ed in linea
Come impostare le pseudo-classi