Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Icone CSS


Le icone possono essere facilmente aggiunte alla tua pagina HTML, utilizzando una libreria di icone.



Come aggiungere icone

Il modo più semplice per aggiungere un'icona alla tua pagina HTML è con una libreria di icone, come Font Awesome.

Aggiungi il nome della classe icon specificata a qualsiasi elemento HTML inline (come <i>o <span>).

Tutte le icone nelle librerie di icone sottostanti, sono vettori scalabili che possono essere personalizzati con CSS (dimensioni, colore, ombra, ecc.)


Icone fantastiche dei caratteri

Per utilizzare le icone di Font Awesome, vai su fontawesome.com , accedi e ottieni un codice da aggiungere nella <head>sezione della tua pagina HTML:

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

Leggi di più su come iniziare con Font Awesome nel nostro tutorial di Font Awesome 5 .

Nota: non è richiesto alcun download o installazione!

Esempio

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

Risultato:

Per un riferimento completo di tutte le icone di Font Awesome, visita il nostro Icon Reference .



Icone Bootstrap

Per utilizzare i glyphicon Bootstrap, aggiungi la seguente riga all'interno della <head>sezione della tua pagina HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Nota: non è richiesto alcun download o installazione!

Esempio

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

Risultato:


Icone di Google

Per utilizzare le icone di Google, aggiungi la seguente riga all'interno della <head>sezione della tua pagina HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Nota: non è richiesto alcun download o installazione!

Esempio

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

Risultato:

Per un elenco completo di tutte le icone, visita il nostro Tutorial sulle icone .