Cerca
Filtra la ricerca ...
Frase esatta
Categorie

Lista completa icone Font Awesome e relativo valore content CSS

FontAwesome è un webfont che può essere utilizzato ovunque, lo possiamo integrare anche durante lo sviluppo di un sito web HTML o in un progetto PHP, Joomla!, WordPress, ecc.. vediamo la sintassi per richiarmalo.

Dove scaricare Font Awesome

Font Awesome si scarica da qui

In alternativa (di solito la preferisco), senza scaricarlo è possibile richiamarlo dalle MaxCDN di Boostrap qui ed incollare il codice prima della chiusura del tag head.

Come richiamare ed utilizzare Font Awesome in un sito web

Se avete scelto di incorporarlo dalle CDN, potete saltare questo pezzo di guida ed andare al paragrafo successivo

Una volta scarica l’archivio zip, troveremo al suo interno le seguenti cartelle :

come usare font awesome

a meno di non avere la necessità di utilizzare il css less o il css scss, possiamo utilizzare i più comuni, ossia il css compilato in modo tradizionale.

A questo punto dobbiamo richiamare il file css di Font Awesome, consiglio di usare il minifier ( font-awesome.min.css) in quanto è fià compresso, occupa meno spazio e ne migliora le performance del sito stesso durante il suo caricamento.

Apriamo la nostra pagina web e prima della chiusara del tag head (</head>) incolliamo la seguente stringa :

ovviamente il file deve risiedere nella vostra carrella “css”.

In questo modo abbiamo la chiamata verso il file css, ma non abbiamo ancora incorporato il font web, quindi copiamo l’intera cartella “fonts” dall’archivio zip che abbiamo precedentemente scaricato ed incolliamola al livello della directory superiore della cartella css, avremo quindi una struttura :

come incorporare font awesome

Il codice CSS da scrivere per ogni elemento sarà :

adesso possiamo divertirci inserendo le icone nel nostro progetto web.

Lista icone Font Awesome e valore content css aka cheat sheet

Ricordo che lo pseudo elemento :content e :after non possono essere utilizzati in modo nativo sugli elmenti <input>

La lista si trova http://fontawesome.bootstrapcheatsheets.com/ comprensiva di tag HTML, unicode e regola CSS.

fontawesome cheatsheet

Come creare nuove icone glyph icons per Font Awesome

Se invece non trovate l’icona che fa per voi, potete sempre crearle ad hoc in formato vettoriale e poi incorporarle utilizzando il servizio Font Custom

Potrebbe interessarti anche ...

2 commenti su “Lista completa icone Font Awesome e relativo valore content CSS”

  1. Ciao gentilmente è la prima volta che uso i FONT-AWESOME e sto cercando di usarlo con less.
    C’è scritto di modificare la variabile in less dove punta il fonts. Ma è un percorso relativo ed io ho seguito ma nulla non appare.
    Come devo fare?
    Se mi puoi dare info sono contento.
    Grazie ancora
    Andrea

    Rispondi
    • Ciao Andrea, se usi less va modificata la path “@fa-font-path” all’interno del file variables.less, funziona come fosse un css normale, per esempio :
      ../css/file.css i due puntini all’inizio indicano che il file è in una directory prima rispetto alla directory corrente (css).

      Rispondi

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.