IcoMoon: Crea, Scarica Icone e fai Font CSS Per il Tuo Sito Web

Pubblicato da Yuri Carlenzoli | 07 Dicembre 2012

IcoMoon è un servizio web che permette di crearsi icone, modificare quelle presenti e scaricarle, in alta qualità, fa anche i font con CSS e @font-face.

IcoMoon

I trends nel web design sono soliti a cambi che bene o male coinvolgono tutti i possessori di siti internet, l'ottimizzazione per i motori di ricerca non è mai una cosa statica, a volte queste due cose vanno a braccetto, design più leggeri infatti rendono un sito web più veloce, e, minimalista che sia, un po di grafica, icone ed immagini devono esserci, se si vogliono sia ottimizzare nelle dimensioni che rendere il layout più al passo con i tempi IcoMoon è molto utile.

Caratteristiche di IcoMoon

Sempre restando a tema con le icone per i siti internet, quelle che ha, che crea e che fa scaricare IcoMoon sono in alta qualità, in formato PNG e SVG, se messe in layout moderni, ovvero con il responsive design si vedono perfettamente con varie risoluzioni, per fare un ottimo lavoro e pensare ulteriormente alle prestazioni inoltre non è una brutta idea convertire lo sprite CSS che è stato fatto dandolo in pasto ad IcoMoon.

I font che fa IcoMoon e che si possono anche fare e scaricare con font personalizzati e che possono essere inseriti nelle pagine web, in teoria li si possono fare anche con FLIR o con Google Web Fonts, la caratteristica di rendere il design pressoché uguale con qualsiasi dimensione del monitor si visiti il sito web rimane, che al contrario delle immagini ricalate che degradano la qualità.

L'ottimizzazione per i motori di ricerca che si può fare con IcoMoon non è uguale a quella che si fa rimpiazzando i font veri e propri dato che non saranno visti ed indicizzabili come testo, è più un'ottimizzazione per l'usabilità e la velocità di caricamento, sopratutto se si usano i font personalizzati soltanto in delimitate aree di testo (il titolo ad esempio), si potranno scaricare e far caricare alla pagina solamente i font desiderati tramite CSS e non tutto l'alfabeto, non ci saranno ulteriori richieste HTTP/DNS, inoltre, tramite il generatore è possibile selezionare se si vuol far generare il CSS (che farà comunque) con le immagini dei font in Base64, le richieste HTTP saranno ancor meno.

Come fare Icone e Font con IcoMoon

A meno che, come ho suggerito non si vogliano modificare nuovamente le icone che sono state create per fare lo sprite CSS, le icone su IcoMoon sono già fatte, basta selezionarle nell'applicazione "IcoMoon App", premere "Images" a fondo pagina e verrà aperta una finestra dove si potrà scegliere il colore (digitare l'HEX) delle icone prima di scaricarle, immettere le dimensioni in pixel e si potrà anche selezionare se si vuole lo sprite CSS, premendo il pulsante rosso in alto a sinistra "Import Icons" si potranno importare le proprie icone e/o i fonts.

Dopo aver selezionato un'icona o dopo aver caricato un font su IcoMoon e dopo aver premuto "Font" si potranno personalizzare ulteriormente alcune opzioni, premendo "Download" si scaricherà un archivio che decompresso e dopo aver premuto il file "index.html" mostrerà l'esempio dei font che sono stati fatti:

Font-Fatti-Con-IcoMoon

Concludo dicendo che purtroppo la semplicità di utilizzo di IcoMoon e l'inserimento nei siti web dei font da lui realizzati non è elementare, i webmaster con un po d'esperienza però non faranno fatica, la generazione, modifica ed il download delle immagini è basilare, inoltre dico anche che per forza di cose i font caricati su IcoMoon devono essere in formato SVG.

Qui trovate la IcoMoon App, navigando nel sito troverete altre risorse, anche a pagamento come ad esempio la CDN per i font personalizzati, quello descritto in questo articolo è tutto gratuito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Moderazione dei commenti attiva. Il tuo commento non apparirà immediatamente.