Come inserire un icon font nel vostro documento HTML
Gli icon font sono font vettoriali composti da icone funzionali invece che da lettere, come abbiamo già spiegato nell’articolo generale sugli icon font. Gli sviluppatori web, che decidono di usare gli icon font, approfittano dei numerosi vantaggi delle icone vettoriali scalabili. Al contrario dei font basati su pixel, quelli vettoriali vengono definiti indipendentemente dal dispositivo come primitivi grafici (ad esempio linee, cerchi, poligoni o curve) e questo consente una trasformazione agevole e senza perdite di qualità partendo da un file CSS. Le icone corrispondenti non devono quindi essere caricate separatamente in un programma di grafica o adattate perché la formattazione, basata su codice, avviene sul browser. Per questo un icon font di un file CSS deve essere inserito nell’header del documento HTML. Successivamente si possono integrare singole icone attraverso l’attributo “class” nel documento HTML del sito web. Nell’esempio successivo vi spieghiamo come funziona l’inserimento in Font Awesome, uno dei font open source più amati.
Inserire icone con Font Awesome
Con più di 600 icone, Font Awesome è una delle più grandi raccolte di simboli vettoriali, disponibile gratuitamente. Per incorporare l’icon font in un sito web, gli sviluppatori devono scaricare il pacchetto di installazione dal sito web di Font Awesome. L’inserimento dell’icon font avviene in tre passaggi:
1. Download del pacchetto di installazione
2. Inserimento del foglio di stile (stylesheet) 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 installazione, al documento HTML corrispondente. Per farlo, bisogna inserire il seguente codice nell’header del documento HTML:
| <link rel="stylesheet" href="https://www.ionos.it/digitalguide/path/to/font-awesome/css/font-awesome.min.css"> |
Il comando “path/to/” indica il percorso del file del progetto web sul server.
3. Inserire icone: stabilito il collegamento 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”.
| <i class="fa fa-home"></i> |
Il codice per inserire le icone si trova sul sito web di Font Awesome.
Alternativamente all’elemento “i”, un’icona può essere inserita anche con un tag <span>.
Articoli simili
Icon fonts: il web design basato su icone vettoriali
Utilizzate un icon font per inserire una funzionale icona vettoriale sul vostro sito web. Al contrario delle immagini pixel classiche, quelle vettoriali hanno il vantaggio di lasciarsi scalare a piacere senza alcuna perdita di qualità. Inoltre l’inserimento su CSS (Cascading Style Sheets) offre ulteriori possibilità di agire direttamente sul codice. Molti progetti open source mettono a…
Tipografia nel responsive web design: nozioni base
Su internet si trovano numerosi testi con diversi caratteri. La diffusione del responsive web design si riflette anche sulla tipografia nei siti web e la visualizzazione dei caratteri dovrebbe adattarsi sempre alla schermata del dispositivo utilizzato. La tipografia reattiva deve avere una visualizzazione flessibile e utilizzare font adatti. In questo primo articolo vi offriamo una panoramica dei…
Tipografia nel responsive web design: caratteri adatti
In quest’ultimo articolo della serie dedicata alla tipografia nel responsive web design, vi mostriamo come la scelta di caratteri sia cresciuta esponenzialmente con l’introduzione dei font. Molti di questi sono scaricabili gratuitamente e grazie alla loro adattabilità sono perfetti per un responsive web design; il font delle vostre pagine web si adatta alle caratteristiche del dispositivo mobile.…
Tipografia nel responsive web design: formattazioni CSS
Nel responsive web design la tipografia è un campo trascurato, nonostante la realizzazione di un carattere reattivo non sia più un segreto per pochi. Ma come si fa a realizzarlo? E quali font sono adatti a una scrittura responsive? Vi offriamo una panoramica su come realizzare una tipografia reattiva e come inserirla sul vostro sito tramite i CSS.
WordPress: come inserire le icone
Le icone non solo ravvivano il vostro sito WordPress, ma lo rendono anche più facile da navigare. Gli icon font in particolare offrono molti vantaggi e convincono con numerosi pittogrammi diversi per ogni scopo. Nell’articolo vi spieghiamo cosa sono gli icon font, come aggiungere icone a WordPress in modo facile e veloce, e dove trovarle.
Dominio omaggio per un anno