Come trasformare le tue icone in un font Web
Avevo creato alcune icone precise per una riprogettazione del sito Web che stavo facendo e ho visualizzato l'anteprima del nuovo sito su un vecchio iPad. Il layout sembrava OK a dimensioni normali, ma ingrandendo una parte della pagina, improvvisamente ho visto che la mia icona era un pasticcio sfocato, mentre l'intestazione testuale era ancora nitida e nitida. Su un iPad con retina più recente, le icone non sembravano abbastanza nitide, anche a dimensioni normali.
La prima idea che ho avuto è stata quella di creare immagini sprite di dimensioni doppie, impostandole per mostrare a metà delle loro dimensioni usando CSS. Mentre questo li ha fatti sembrare migliori su un display Retina di dimensioni normali, non appena hai iniziato a pizzicare e zoomare, la sfocatura è tornata. Ma il testo era ancora nitido e nitido.
La risposta era ovvia. Avevo bisogno di trasformare le mie icone in un font.
In questo tutorial, vedremo come trasformare le icone vettoriali in un font web usando una grande applicazione web gratuita chiamata IcoMoon. Quindi, vedremo come usare i file di font generati e il CSS in una pagina web.
I vantaggi dell'utilizzo di un font di icone
Un carattere di icona presenta numerosi vantaggi rispetto alle immagini bitmap, oltre alla nitidezza delle immagini.
- Idoneità: un font di icone sarà molto più piccolo nelle dimensioni del file rispetto a una serie di immagini, specialmente se sono state utilizzate immagini a doppia dimensione per i display Retina. E una volta caricato il carattere, le icone verranno renderizzate immediatamente, senza bisogno di scaricare un'immagine.
- Scalabilità: un carattere di icona può essere impostato su qualsiasi dimensione impostando il
font-sizeproprietà nel CSS di accompagnamento. Questo ti permette di sperimentare con diverse dimensioni; mentre, per le immagini bitmap, dovresti produrre un file immagine per ogni dimensione. - Flessibilità: gli effetti di testo possono essere facilmente applicati all'icona, inclusi colori, ombre esterne e stati di rollover. Verranno inoltre visualizzati bene contro qualsiasi colore o sfondo di immagine.
- Compatibilità: i caratteri web sono supportati da tutti i browser moderni e anche dai browser legacy, anche IE 6 e versioni precedenti.
Quindi iniziamo!
Creazione di un carattere di icona
I font Symbol possono essere creati utilizzando un'app dedicata per la creazione di font come glifi , ma uno strumento di tipografia professionale è molto al di là delle esigenze o dei requisiti necessari per creare un semplice carattere di icona, in cui la relazione tra caratteri (cioè crenatura e legature) non è importante.
Di gran lunga il modo più semplice è usare una grande app gratuita online chiamata IcoMoon , da Keyamoon, che elimina tutta la seccatura di convertire i simboli in un font web.
Questa app HTML5 elimina tutta la fatica di creare file di font per usi semplici come la costruzione di font di icone. IcoMoon è dotato di una serie di set di icone già caricati e puoi aggiungerne altri alla tua libreria, la maggior parte dei quali può essere utilizzata gratuitamente (controlla le licenze). Se stai cercando icone abbastanza standard, come "download di file" e "carrello della spesa", potresti scoprire che l'utilizzo di uno di questi è preferibile per crearne uno tuo.
Passo dopo passo
1. Prepara le tue illustrazioni
Per cominciare, è necessario creare le icone in un programma di disegno vettoriale che sia in grado di esportare in formato SVG, come Illustrator o Inkscape.
Mentre stai progettando, puoi lavorare con qualsiasi colore tu voglia, ma le icone devono avere un colore solido. Assicurati che ogni icona abbia approssimativamente le stesse dimensioni. Avere un'icona molto più alta o più lunga di un'altra renderà difficile creare un font coerente. Qui, ho dovuto ridurre la larghezza dell'icona del mio dirigibile in modo che corrisponda agli altri.
2. Pulisci
Controlla attentamente ogni icona per assicurarti che non abbia imperfezioni: i dettagli che sembrano OK in dimensioni più piccole possono nascondere piccoli difetti quando vengono ingranditi. Nell'icona mostrata sotto, ho bisogno di rimuovere i passaggi frastagliati che si sono insinuati durante la stratificazione degli elementi.
In Illustrator, utilizzare lo strumento Pathfinder per unire elementi sovrapposti e l'elemento Fronte meno per rimuovere elementi di ritaglio, come la stella in queste icone.
Il principio chiave è garantire che l'icona sia leggibile su piccola scala. Semplifica il più possibile.
3. Esportare in SVG
Ora seleziona un'icona e copiala e incollala in un nuovo documento quadrato (ad esempio, 200 × 200 pixel). Ridimensiona l'icona in modo che si adatti. Potrebbe essere utile impostare un righello di base. Colorare l'icona in modo che sia completamente nera su uno sfondo bianco.
Ora, scegli File… Save as e salvare il file come file SVG. Usa le impostazioni SVG predefinite. Una volta che hai fatto questo per tutte le icone, sei pronto per creare un font web.
4. Importare in IcoMoon
Apri il App Web di IcoMoon . Per importare un'icona, fai clic sul pulsante "Importa icone", quindi seleziona i file SVG che desideri aggiungere: puoi aggiungere più file contemporaneamente. Questi verranno quindi visualizzati sotto "Le tue icone personalizzate". Se sono evidenziati in giallo, faranno parte del carattere dell'icona che creerai. In questo esempio, puoi vedere che ho deciso di non esportare una delle mie icone personali e ho aggiunto una delle icone delle "Mini-icone".
5. Esporta font da IcoMoon
È possibile fare clic sul pulsante "Modifica" se si desidera regolare la posizione, il dimensionamento o la rotazione dell'icona. Utilizzare il pulsante "Salva copia" per creare variazioni di icone (ad esempio un'immagine speculare di un'icona). Aggiungi un tag significativo all'icona, perché questo verrà utilizzato per generare il nome della classe per esso.
Quando sei pronto, fai clic sul pulsante "Font" nella parte inferiore dello schermo per iniziare a generare il carattere. Qui è dove puoi assegnare quale icona è mappata a quale personaggio; ad esempio, se il tuo set di icone è composto da sei immagini di una palla che gira, puoi assegnare i caratteri q, w, e, r, t e y ai sei fotogrammi. Nelle preferenze, scegli un nome di carattere. Puoi anche regolare le metriche del carattere, ma a meno che tu non abbia intenzione di impostare il tuo carattere personalizzato insieme al testo standard, non devi preoccuparti di questo.
6. Scarica i file dei font
Fai clic su "Download" per scaricare il pacchetto di font sulla tua macchina. Sarà una sottocartella contenente i caratteri stessi (nei formati WOFF, EOT e TTF), nonché una pagina HTML di esempio e il CSS corrispondente. C'è anche un file JavaScript con una soluzione alternativa se è necessario supportare IE 6 o 7.
Per aggiungere i caratteri al tuo progetto, copia la sottocartella dei caratteri sul tuo sito. Puoi copiare e incollare il CSS da style.css nel file CSS del tuo sito, ma il mio approccio è rinominarlo come fonts.css e tenerlo come un file CSS separato. È quindi necessario aggiungere un riferimento a questo file CSS nel file HTML utilizzando il collegamento relativo:
<link rel="stylesheet" href="fonts.css" />Nell'elemento @ font-face del file CSS, sarà necessario modificare il riferimento all'URL nella nuova posizione relativa dei caratteri, oppure semplicemente trascinare la cartella dei caratteri nella cartella del foglio di stile.
7. Chiamare il carattere
Come puoi vedere nel file index.html di esempio, ci sono due modi per fare riferimento al carattere personalizzato, sia dal suo carattere (unicode o nome) o dal suo nome di classe. Il primo esempio utilizza la condizione dell'icona dei dati HTML5
<div aria-hidden="true" data-icon="g"></div>Qui, la classe fs1 viene utilizzata per impostare la dimensione del carattere. Il riferimento aria-nascosto aiuta a garantire che il carattere non venga pronunciato da alcun lettore di schermo.
Il secondo metodo utilizza un elemento span:
<span aria-hidden="true"></span>Questo metodo è utile quando vuoi che il simbolo sia in linea con il testo normale.
Se vuoi rendere l'icona un link, puoi avvolgerlo tutto in un href :
8. Idee avanzate
Come abbiamo appena scoperto con lo stato di passaggio del mouse, la modifica del colore dell'icona è facile come l'impostazione della proprietà del colore nel nostro CSS e la modifica della dimensione è facile come impostare la proprietà della dimensione del carattere. Puoi anche impostare altre proprietà, come l'ombreggiatura del testo e la trasparenza, il tutto mantenendo l'indipendenza dalla risoluzione di un font.
Provalo e ti garantisco che non utilizzerai mai più le icone bitmap.
Hai provato a usare i caratteri per le icone? Come l'hai trovato? Fateci sapere nei commenti.