Generare icon fonts con Fontello

Sempre più spesso vengono usati font icon per gestire le icone del proprio siti o blog. Abbiamo scelto tra i vari servizi online di font generator, "Fontello", e devo dire che ci è piaciuto molto!
Generare icon fonts con Fontello

I font icon impazzano

Li abbiamo sperimentati e li vedrete presto in azione nella nuova versione grafica del blog. La prima in assoluto fatta da noi. Dopo due anni abbiamo finalmente trovato il tempo e la forza per buttarci in questa nuova sfida. Fontello è un servizio online fatto molto bene, scopri come funziona!

Fontello

Il servizio, raggiungibile a questo indirizzo, è facilissimo da utilizzare. Per prima cosa scegli le icone che faranno parte del tuo set. Puoi valutarne la resa con differenti valori di font-size e se non trovi quella giusta a colpo d’occhio, puoi cercarla tramite il motore di ricerca interno. Una volta completato il tuo set di icone, scarica il pacchetto in locale. Il pacchetto comprende diversi file, tra cui il font nei differenti formati e un demo html da tenere sempre sotto mano, che mostra i codici associati ad ogni simbolo, codici che serviranno per richiamarli correttamente all’interno del CSS.

Se un domani devo aggiungere una nuova icona al mio set? Nessun problema puoi fare l’upload del config.json e automaticamente il sistema ricaricherà il tuo attuale set di icone. Scegli la nuova e riscarichi di nuovo il pacchetto.

Contenuto generato

Il codice CSS prevede che venga inserita l’icona tramite “contenuto generato” e il valore della proprietà content sarà proprio il codice che fontello ci fornisce nel suo demo.html che hai appena scaricato (nel caso dell’icon del W3c sarà -> \33). Tieni sempre da parte la cartella cosi da avere sempre sotto mano tutti i codici da utilizzare nel tuo set. La documentazione al riguardo, consultabile a questo link, ci fornisce chiare indicazioni circa il suo utilizzo.

This property is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:

Questa proprietà, ci viene spiegato, è utilizzata con gli pseudo-selettori before e after per generare contenuto in un documento. Tra i possibili tipi di valori che possono essere presi in considerazione, String è il tipo di valore che può fare al caso nostro; gli altri sono elencati di seguito.

  • none
  • normal
  • string
  • uri
  • counter
  • open-quote and close-quote
  • no-open-quote and no-close-quote
  • attr(X)

Che compatibilità abbiamo?

La compatibilità è molto buona ad eccezzione per IE7. Ho cercato un pò e sia stackOverflow che lo stesso Fontello propongono un fix sullo zoom tramite un’ espressione CSS dinamica. E’ un pò na zozzeria lo ammetto ma in casi eccezionali come questo si può anche fare uno strappo alla regola. Il codice lo puoi trovare poco piu in basso.

Icona più testo descrittivo

Il markup HTML è molto semplice:

<span class="w3c"><span class="icon"></span>consortium</span>

Il CSS ruota intorno alla proprietà content. Per Internet Explorer, come ti anticipavo, necessitiamo di un hack abbastanza pesante che consente di valorizzare il contenuto generato via javascript in quanto la versione 7 di IE non riconosce la proprietà content, fondamentale per il funzionamento di tale tecnica. Non associare l’expression allo pseudo selettore perchè non funziona.

@font-face {
	font-family: 'fontello';
	src: url("font/fontello.eot");
	src: url("font/fontello.eot#iefix") format('embedded-opentype'), url("font/fontello.woff") format('woff'), url("font/fontello.ttf") format('truetype'), url("font/fontello.svg#fontello") format('svg');
	font-weight: normal;
	font-style: normal;
}

.w3c .icon{
	font-family: fontello;
	color: #025A9A;
	*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x33;&nbsp;');
}

.w3c .icon:before{
	display: inline-block;
	vertical-align: middle;
	margin-right: 20px;
	content: "\0033";
}

Pro e Contro

Di seguito ti elenco alcuni vantaggi e svantaggi nell’utilizzo di questa tecnica. Di sicuro ne troverai altri, quindi fammi sapere cosa ne pensi.

  • Puoi evitare di creare uno sprite e dover gestire le varie posizioni tramite il background-image
  • Non pesano molto
  • Sono sematicamente corretti
  • Puoi creare svariati effetti di hover su colore, alpha, dimensioni etc senza dover creare diverse varianti della stessa immagine
  • La visualizzazione su schermi retina risulta ottimale
  • La tecnica utilizzata è retro-compatibile fino a IE7. Per quest’ultimo browser però bisogna ricorrere ad un espressione CSS che sporca un pò il codice.
  • Ci sono molti generatori online che ne facilitano la creazione ma devi adattarti alle icone che trovi, oppure puoi creartene uno personalizzato ma il procedimento si complica leggermente. Ecco un ottimo articolo che illustra passo passo come crearsi un proprio font.

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github