Premessa
Ho deciso di pubblicare periodicamente qui in HTML e CSS una "serie" di topic chiamati "Alleggeriamo il sito web": come dice stesso il titolo, saranno una serie di discussioni trattanti "tips e tricks" per alleggerire il proprio sito web.
Oggi, sta diventando sempre più cruciale ottimizzare i tempi di caricamento dei propri siti web, soprattutto per migliorare la fruizione da dispositivi mobile o da connessioni lente (e qui in Italia, in particolare, ne abbiamo ancora molte).
Font Awesome
Cos'è Font Awesome? Sostanzialmente è un font - o più precisamente un Webfont - che tuttavia non contiene i classici caratteri per scrivere, ma bensì è un font colmo di icone che ci permetterà di snellire i tempi di caricamento del nostro sito web ed al tempo stesso di velocizzare anche lo sviluppo del sito offrendo comunque un set di immagini coerenti tra loro nello stile (flat, come vogliono gli ultimi dettami in tema di graphic design).
Il punto di forza di utilizzare un Webfont come Font Awesome al posto delle immagini è dato dal fatto che queste icone, come del resto i glifi ogni font, sono in grafica vettoriale e dunque ciò si traduce in un singolo font che il browser degli utenti scaricherà e che risulterà molto più leggero rispetto al dover scaricare una moltitudine di immagini.
Dunque avremo tempi di caricamento ridotti per due motivi in particolare:
- Un'unica richiesta che il browser deve effettuare per scaricare il webfont a fronte di molteplici che invece bisognerebbe effettuare senza uno sprite di immagini.
- Icone in grafica vettoriale (più leggere e scalabili a qualsiasi dimensione senza perdita di qualità).
Ulteriori info su Font Awesome le trovate qui:
Lista delle icone:
Come inserire FontAwesome sul proprio sito web
In primo luogo, importate FontAwesome inserendo questa linea nell'head:
(questo ovviamente è il metodo più veloce, importandolo tramite CDN, ma è possibile anche scaricare il webfont per hostarlo direttamente sul proprio server)
Fatto questo, potrete utilizzare ogni singola icona utilizzando un tag come questo:
Un piccolo tip finale
Per migliorare il rendering di queste icone, vi consiglio di inserire una semplice regola css come questa:
Ho deciso di pubblicare periodicamente qui in HTML e CSS una "serie" di topic chiamati "Alleggeriamo il sito web": come dice stesso il titolo, saranno una serie di discussioni trattanti "tips e tricks" per alleggerire il proprio sito web.
Oggi, sta diventando sempre più cruciale ottimizzare i tempi di caricamento dei propri siti web, soprattutto per migliorare la fruizione da dispositivi mobile o da connessioni lente (e qui in Italia, in particolare, ne abbiamo ancora molte).
Font Awesome
Cos'è Font Awesome? Sostanzialmente è un font - o più precisamente un Webfont - che tuttavia non contiene i classici caratteri per scrivere, ma bensì è un font colmo di icone che ci permetterà di snellire i tempi di caricamento del nostro sito web ed al tempo stesso di velocizzare anche lo sviluppo del sito offrendo comunque un set di immagini coerenti tra loro nello stile (flat, come vogliono gli ultimi dettami in tema di graphic design).
Il punto di forza di utilizzare un Webfont come Font Awesome al posto delle immagini è dato dal fatto che queste icone, come del resto i glifi ogni font, sono in grafica vettoriale e dunque ciò si traduce in un singolo font che il browser degli utenti scaricherà e che risulterà molto più leggero rispetto al dover scaricare una moltitudine di immagini.
Dunque avremo tempi di caricamento ridotti per due motivi in particolare:
- Un'unica richiesta che il browser deve effettuare per scaricare il webfont a fronte di molteplici che invece bisognerebbe effettuare senza uno sprite di immagini.
- Icone in grafica vettoriale (più leggere e scalabili a qualsiasi dimensione senza perdita di qualità).
Ulteriori info su Font Awesome le trovate qui:
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Lista delle icone:
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Come inserire FontAwesome sul proprio sito web
In primo luogo, importate FontAwesome inserendo questa linea nell'head:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Fatto questo, potrete utilizzare ogni singola icona utilizzando un tag come questo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Un piccolo tip finale
Per migliorare il rendering di queste icone, vi consiglio di inserire una semplice regola css come questa:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ultima modifica:
se non erro sono le stesse, confermi? :sisi:
