I font di icone sono incredibilmente utili quando si progetta un sito e hanno un enorme numero di vantaggi rispetto alle icone normali.
Poiché sono forniti come un file di font e sono incorporati come un font, queste icone sono facilmente scalabili, il loro colore può essere modificato dal vivo, piuttosto che dover modificare le immagini; insieme a questo, vari effetti possono essere aggiunti tramite la codifica, come ombre, effetti del tratto o gradienti, rendendoli molto più versatili delle immagini.
Qui andremo ad arrotondare alcuni dei migliori font di icone che il world wide web ha da offrire, da utilizzare sui tuoi siti.
Fico è un font dall'aspetto fantastico, presentato su un sito bellissimo, che lo rende una gioia da scaricare e utilizzare. Il sito mostra chiaramente quale lettera o glifo viene utilizzato per ogni icona, rimuovendo il processo talvolta doloroso di scaricare un font di icona solo per scoprire che non hai idea di dove trovare ogni icona sulla tastiera e che impiega un tempo prezioso per scorrere ogni tasto. Queste icone sono fantastiche in congiunzione con Helvetica, le linee morbide e pulite che lavorano insieme tematicamente danno l'impressione che Fico sia stato realizzato per i caratteri sans serif. Ulteriori esempi possono essere visti sul loro sito.
pixelated è un font che, nonostante tutto il suo fascino, ha un uso pratico. Pixelated è estremamente leggero, le dimensioni dei file delle icone sono di circa 60 byte! Non megabyte, o anche kilobyte, byte! Puoi anche scaricarli come GIF trasparenti, quindi sono compatibili con IE6 e, se desideri modificarli, puoi scaricare un PSD. Il carattere viene fornito con due combinazioni di colori, mostrate sotto, rendendole ancora più semplici da utilizzare. È completamente gratuito ed è disponibile per uso commerciale!
Sorprendentemente per un font con oltre 100 icone, Entypo è completamente gratuito e, come Pixelated, è disponibile per uso commerciale. Può essere scaricato come file vettoriale per la modifica accanto al file di font OpenType. Questo tipo di carattere ricorda molto le icone dell'interfaccia Apple, utilizzate in iOS5 e OSX10 e, come tocco di classe, il 50% delle donazioni effettuate sul sito del font sono donate a Wikipedia.
Oltre al nome piuttosto arguto, Uicons offre 391 icone nel proprio set e include icone specifiche per i social network che spesso mancano molto nei font icon. Non sorprendentemente questo set non è gratuito, tuttavia per un $ 20 relativamente economico tutti gli aggiornamenti successivi al font sono gratuiti. Queste icone sono progettate per essere scalabili all'infinito, rendendo molto più semplice la progettazione reattiva, dai display desktop 1080p ai dispositivi mobili come l'iPhone. Può essere scaricato in più formati, ma non come font attualmente, è incluso in questo elenco come supporto è in sospeso, e merita un posto qui.
iconic è un set di icone open source composto da 171 icone in vari formati, incluso un font. È progettato per essere scalabile, "mira ad essere l'icona più lungimirante impostata in base al supporto dei metodi di visualizzazione / distribuzione rivolti in avanti. Le icone non dovrebbero essere solo chiare e attraenti, dovrebbero essere facili e flessibili con cui lavorare ". La natura open source di questo font significa che è stato aggiunto per necessità quando erano necessarie le icone, piuttosto che pianificato come set dall'inizio, portando ad alcune icone piuttosto interessanti e meno che normali incluse nel set.
Questo è un adattamento di un altro font, Bitcons , un set di 120 icone in 10 colori diversi e varie dimensioni. Sanscons mira a rendere i Bitcon più compatibili con i CSS, con sfondi trasparenti e 13 colori. Le icone sono disponibili anche in 16 × 16, 32 × 32 e 64 × 64 pixel e tagliate su misura. Le icone 32 × 32 e 64 × 64 hanno un aspetto chunkier, mantenendo lo stile dei pixel. Il set è gratuito sotto la licenza Creative Commons.
Heydings è un font creato dal 'deficit frustrante di alta qualità, font web gratuiti per l' icona disponibili per l'incorporamento', nelle parole dei creatori. Contiene 60 glifi e il sito Web offre persino i CSS per semplificare la codifica con il carattere. L'autore ha anche mappato le icone in ordine alfabetico per ulteriore facilità d'uso. Questi sono progettati per essere utilizzati come parte dell'interfaccia utente principale del tuo sito, e quindi i glifi coprono una vasta gamma per una varietà di siti diversi.
Questo set di icone è accompagnato da un ampio sito Web che copre tutti gli aspetti di Solo vettoriale , dal modo in cui viene reso in-browser a come apparirebbe su un sito formattato, in varie dimensioni, insieme al codice per rendere più facile l'uso di fontface. Include anche una pratica guida alla risoluzione dei problemi che si applica a tutti i webfonts, che coprono il caricamento in vari browser, compresi quelli mobili. Il sito Web dimostra la scalabilità del font, mostrando dimensioni molto più grandi di molti font di icone che si preoccupano di supportare.
flessibile è disponibile su myfonts.com, che offre facilmente una pagina che mostra il rendering del font su più browser. Il font ha 68 glifi e costa $ 29, così come un webfont offre le opzioni OpenType OTF e TrueType per la versatilità.
Writesocial ha solo le 18 icone mostrate sotto, tuttavia il $ 10 è giustificato nelle varianti in cui possono venire, con opzioni come le icone quadrate o circolari. Viene fornito con un Open Type Format, oltre ad essere concesso in licenza per l'utilizzo con @ font-face. Al momento dell'acquisto viene fornito un file HTML con più esempi di utilizzo del font @ font-face. Oltre a questo, puoi scegliere di pagare $ 15 per il font, invece dello standard $ 10, dove $ 10 dei $ 15 vanno a Charity: Water.
ikoo è un font sviluppato appositamente per essere integrato in una pagina html senza utilizzare immagini tramite @FontFace o altri mezzi. Si concentra sulla navigazione del sito e offre una serie di icone veramente pulite sia nelle varianti bianche che in quelle nere, con 65 icone libere in totale.
Questo ti dà due set al prezzo di uno, solo $ 29 per 190 caratteri, InfoBits ha due font icone separati, mostrati sotto, che sono anche disponibili singolarmente per $ 19 ciascuno. I personaggi hanno uno stile giocoso, ma tradizionale, con una vasta gamma di usi e opzioni, essendo estremamente versatile sia per la navigazione del sito che per altri usi periferici.
Pictos è un set di icone disponibile in un numero incredibile di formati e il sito ha un portachiavi incorporato per personalizzare il tuo font Pictos. Contiene 650 icone, ed è considerato abbastanza buono da essere utilizzato in tutto il web, da siti come Microsoft, Adobe e BitTorrent. In base alla funzionalità dei caratteri personalizzati, viene utilizzato direttamente dai server Pictos e richiede quindi una sottoscrizione scalabile dopo una prova gratuita di 10 giorni. È un font incredibilmente attraente ed è facile capire perché viene utilizzato da così tanti siti Web affidabili.
Questo font è progettato per essere utilizzato con il framework CSS Bootstrap di Twitter, incluse le 220 icone, fornendo esempi delle icone utilizzate nell'interfaccia Bootstrap sul loro sito. Vengono anche fornite come icone vettoriali per un facile montaggio e la nuova versione 2.0 supporta IE7, per la massima compatibilità.
Cosa trovi l'icona più utile, un carrello, un'icona di Twitter? Abbiamo perso uno dei tuoi set preferiti? Fateci sapere nei commenti.