Icons CSS

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:

icon

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:

icons

In questa lezione abbiamo visto dei semplici esempi sull’utilizzo delle icons CSS, nelle prossime lezioni vedremo tanti altri esempi pratici.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Border radius CSS

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *