Come usare gli icon fonts con i CSS

tramite: O2O
Difficoltà: media
16

Introduzione

Web designer e sviluppatori utilizzano i file css per determinare lo stile delle pagine web e delle loro creazioni. Con l'avvento del css3 e con font sempre più moderni, è possibile effettuare maggiori personalizzazioni anche innovative, utilizzando ad esempio gli icon fonts per caricare icone di ogni genere attraverso un singolo carattere. In questa maniera si velocizza il sito web e si rende più funzionale la grafica responsive. Ecco come usare gli icon fonts nel nostro sito web.

26

Occorrente

  • File html/php, css
36

Per prima cosa dobbiamo trovare gli icon fonts ossia quei font che sono composti da delle icone invece che dalle classiche lettere.
Un primo sito che possiamo utilizzare per questo è Font Squirrel. Naturalmente tra tutti i font presenti dobbiamo scegliere il Modern Pictograms. Clicchiamo sul tab 'Test Drive' e inserendo delle lettere abbiamo un'anteprima del risultato. Inseriamo ad esempio la lettera F per avere l'icona di Facebook, lettera U per l'icona di Twitter, la lettera 'l' per il pollice in su ecc.
Nel tab 'Glyphs' abbiamo l'elenco completo delle lettere da inserire per caricare le icone mentre cliccando su 'DOWNLOAD OTF' possiamo scaricarlo.

46

Il secondo sito dove poter trovare icon font è Font Awesome. Contiene numerose icone ed è utilizzato nella maggioranza dei siti per lo sviluppo grafico, in aggiunta a Twitter Bootstrap. Clicchiamo su Download e scarichiamo uno zip che contiene in particolare le cartelle con i file css e i font nelle varie estensioni cui dovremmo fare l'upload sul sito web.

Una volta importato tutto dobbiamo aggiungere questo codice nelle nostre pagine html o php per richiamare lo stile.

Continua la lettura
56

Una volta che abbiamo effettuato l'upload dei file (Font e css), modificato il percorso del font se necessario, collegato il file css alle varie pagine web, dobbiamo utilizzare delle particolari classi per visualizzare le icone.
Sul sito di Font Awesome clicchiamo su 'Icon' nel menu in alto e ci troviamo di fronte tutte le icone. Scegliamo l'icona che vogliamo inserire ad esempio quella di Paypal (fa-paypal) clicchiamo e copiamo il codice html che utilizzeremo per visualizzarla. Non ci basta che inserire questo codice nella pagina web e visualizzeremo l'icona scelta senza andare a trovare in rete un'immagine.
Naturalmente, ogni volta che utilizziamo font di proprietà altrui dobbiamo leggere e rispettare la licenza di utilizzo. Con gli icon fonts possiamo inserire le icone nelle pagine web velocizzando il sito e risparmiando la banda.

66

Consigli

Non dimenticare mai:
  • Utilizza gli icon font per utilizzare icone sul tuo sito web senza l'utilizzo di immagini. Il tuo sito risulterà più performante e funzionale!
Alcuni link che potrebbero esserti utili:

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Programmazione

Gli errori più comuni su CSS

Il linguaggio CSS (Cascading Style Sheets) si usa essenzialmente per la creazione di un sito web. Insieme all'HTML e al Javascript, formano una pagina web in tutto e per tutto. Il CSS, in particolare, si occupa di tutti quegli aspetti che vanno a comporre...
Programmazione

CSS: 10 cose da sapere

CSS è la sigla che sta per Cascading Style Sheets, ovvero i fogli di stile a cascata che servono per la gestione del layout di un sito web. Grazie ad essi è possibile interagire sugli aspetti visuali delle pagine, controllandone tutti gli elementi grafici....
Programmazione

Come utilizzare CSS3

Ora è d'obbligo avere una conoscenza dei termini per poter usare il nostro computer in maniera adeguata, necessario ed utile per essere pronti ed al passo con i tempi, i vocaboli sono tanti alcune volte è difficile capirne il significato anche perché...
Programmazione

Come cambiare un attributo CSS tramite JavaScript

In ambito informatico sono esistiti - ed esistono tutt'ora - molti linguaggi di programmazione per il web. Sebbene nessuno di essi sia davvero facile da apprendere, alcuni sono più intuitivi di altri e si prestano meglio allo sviluppo di contenuti interattivi...
Programmazione

Come personalizzare la scrollbar con jQuery e CSS

Le scrollbar di default dei browser fanno a pugni con il design del tuo sito? Ti piacerebbe poter creare delle barre di scorrimento personalizzate adatte allo stile delle tue pagine web? Leggi questa guida e scopri come farlo usando jQuery Custom Scrollbar....
Programmazione

Come realizzare un menu a discesa orizzontale con il CSS

Nella seguente pratica e rapida guida che vi esplicherò nei passaggi successivi, vi spiegherò specificatamente come si deve realizzare un menu a discesa orizzontale, soltanto utilizzando il foglio di stile (CSS) per il vostro bellissimo sito internet....
Programmazione

Come installare e configurare Komodo Edit

Per riuscire a creare dei siti internet sono necessarie delle nozioni che consentano di capire i passi da eseguire. Per realizzare il sito poi è essenziale utilizzare programmi che consentono di avere tutto ciò che serve. Komodo Edit è un'eccellente...
Programmazione

Come utilizzare Appium con Python

Appium è un'estensione che riguarda il linguaggio Python, dunque si tratta di un parte essenziale che serve a tutti gli informatici per programmare, in quanto permette di testare i programmi appena creati e di verificarne il funzionamento. Come ben sapete,...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.