Come inserire un icon font nel vostro documento HTML

Gli icon font sono font vet­to­ria­li composti da icone fun­zio­na­li invece che da lettere, come abbiamo già spiegato nell’articolo generale sugli icon font. Gli svi­lup­pa­to­ri web, che decidono di usare gli icon font, ap­pro­fit­ta­no dei numerosi vantaggi delle icone vet­to­ria­li scalabili. Al contrario dei font basati su pixel, quelli vet­to­ria­li vengono definiti in­di­pen­den­te­men­te dal di­spo­si­ti­vo come primitivi grafici (ad esempio linee, cerchi, poligoni o curve) e questo consente una tra­sfor­ma­zio­ne agevole e senza perdite di qualità partendo da un file CSS. Le icone cor­ri­spon­den­ti non devono quindi essere caricate se­pa­ra­ta­men­te in un programma di grafica o adattate perché la for­mat­ta­zio­ne, basata su codice, avviene sul browser. Per questo un icon font di un file CSS deve essere inserito nell’header del documento HTML. Suc­ces­si­va­men­te si possono integrare singole icone at­tra­ver­so l’attributo “class” nel documento HTML del sito web. Nell’esempio suc­ces­si­vo vi spie­ghia­mo come funziona l’in­se­ri­men­to in Font Awesome, uno dei font open source più amati.

Con più di 600 icone, Font Awesome è una delle più grandi raccolte di simboli vet­to­ria­li, di­spo­ni­bi­le gra­tui­ta­men­te. Per in­cor­po­ra­re l’icon font in un sito web, gli svi­lup­pa­to­ri devono scaricare il pacchetto di in­stal­la­zio­ne dal sito web di Font Awesome. L’in­se­ri­men­to dell’icon font avviene in tre passaggi:

1. Download del pacchetto di in­stal­la­zio­ne

2. In­se­ri­men­to del foglio di stile (sty­le­sheet) nell’header del documento HTML: per inserire Font Awesome in un sito web, si deve collegare il file CSS standard “font-awesome.min.css”, contenuto nel pacchetto di in­stal­la­zio­ne, al documento HTML cor­ri­spon­den­te. Per farlo, bisogna inserire il seguente codice nell’header del documento HTML:

 Il comando “path/to/” indica il percorso del file del progetto web sul server.

3. Inserire icone: stabilito il col­le­ga­men­to al file CSS, le icone contenute nel font si possono inserire in qualunque parte del codice sorgente HTML. Per questo entra in azione con Font Awesome un elemento vuoto “i” combinato con l’attributo “class”.

Il codice per inserire le icone si trova sul sito web di Font Awesome.

Al­ter­na­ti­va­men­te all’elemento “i”, un’icona può essere inserita anche con un tag <span>.