Share
Mi piacciono le icone sociali, lo ammetto. Ho letteralmente dozzine di set di icone sociali che ho raccolto nel corso degli ultimi anni, e ho persino creato alcune mie serie per cercare di ottenere quel perfetto adattamento per un particolare progetto.
Ma ultimamente, ho scoperto i font di icone e non ho usato quelle vecchie icone di immagini per un po '.
Immagina i dingbat di ogni tipo e stile - icone sociali, icone dei siti Web, qualsiasi cosa tu possa pensare - solo che non sono immagini: in realtà sono font.
Questo è un grosso problema perché con le icone delle immagini si ottengono, beh, immagini statiche. Potresti ottenere alcune dimensioni diverse della stessa immagine, ma non puoi davvero fare nulla con loro se non usarle così com'è.
Un'icona che in realtà è un font è un animale completamente diverso. Mentre è vero che le icone sono più semplici nell'aspetto, compensano il loro minimalismo essendo altamente personalizzabili. Con un carattere di icona puoi facilmente cambiare la dimensione e il colore di un'icona (proprio come i caratteri di testo!). Inoltre, i font delle icone hanno sfondi trasparenti che funzionano davvero nelle vecchie versioni di Internet Explorer, se si lavora su una vecchia versione di IE è una considerazione per te.
Un altro vantaggio è che possono sostituire gli sprite dell'immagine CSS. L'utilizzo di un carattere personalizzato con icone con un numero limitato di icone funziona in modo simile agli sprite delle immagini, ma ti dà la possibilità di creare icone come il testo.
Se un font dell'icona funzionerà meglio delle icone delle immagini nel tuo particolare progetto dipende da te decidere; entrambi hanno pro e contro. Ma per i nostri scopi, assumeremo che tu sia pronto a provare i font di icone e a voler sapere come utilizzarli in un tema WordPress.
Per il nostro tutorial, metteremo insieme un piccolo set di icone di font per social media per il nostro ipotetico progetto. Avremo bisogno di icone per Facebook, Twitter e Pinterest, quindi iniziamo.
Ci sono un numero limitato di generatori di font di icone online che ti consentono di creare set di caratteri personalizzati solo per te. È possibile creare caratteri personalizzati su base progetto per progetto; è così conveniente! Qui utilizzeremo l'app generator di Icomoon in quanto è il servizio che ho usato più frequentemente.
Il generatore di font di Icomoon è divertente e facile da usare: puoi scegliere tra numerosi font di icone gratuiti e altri commerciali. Ho trovato la qualità dei caratteri che offrono essere molto alta. Puoi anche caricare font di icone che trovi altrove, e usarli nel tuo font personalizzato. Molto maneggevole.
Costruiamo il nostro font personalizzato per i social media. Immaginerò che tu non l'abbia mai fatto prima, ma non preoccuparti se hai bisogno di saltare avanti. Ci raggiungiamo.
Avvia l'app Icomoon nel tuo browser e questo è ciò che vedrai:
Il set gratuito di font Icomoon di base viene caricato e si possono vedere anche altri font di icone gratuiti. Ti consiglio di dare un'occhiata agli altri set che non sono stati caricati, perché potresti trovare qualcosa che ti piace lì. Per visualizzare gli altri set disponibili scorrere fino in fondo e fare clic Più set di icone.
Nella schermata successiva, vedrai una serie di altri font gratuiti e commerciali (Entypo è un set davvero carino che uso frequentemente, solo FYI). Per aggiungere qualcuno di questi alla finestra di selezione principale, basta fare clic su Inserisci pulsante sotto quello impostato.
Una volta tornati sulla schermata principale, e se vuoi rimuovere un set, fai clic sull'icona del menu in alto a destra e successivamente Rimuovi set.
Se hai il tuo font personale, forse uno che hai ricevuto da un client o scaricato da un altro sito, puoi caricarlo facendo clic sul Importa icone pulsante nella parte superiore della schermata di selezione e caricherà le icone nel set. È possibile effettuare selezioni di font da questo set proprio come i set di caratteri Icomoon nativi.
Per il nostro progetto, stiamo cercando icone sociali per Facebook, Twitter e Pinterest. Molti dei set disponibili hanno alcune o tutte queste icone, quindi come si sceglie?
Scegliere le icone dallo stesso set è una soluzione semplice: se un set che ti piace (e quello che si adatta alle esigenze di progettazione del progetto) ha tutte le icone di cui hai bisogno, ottimo. Usa quelli. A volte questo non è il caso però - forse il set che ti piace non ha l'icona di Pinterest, o quello di YouTube è un po 'squirreloso.
In questo caso, scegli e scegli tra diversi set, ma fai attenzione: Icomoon utilizza una griglia di base per ciascuno dei suoi font di icone; per il set Icomoon Free, la dimensione della griglia è 16. Otterrai i risultati migliori (l'aspetto più nitido) in un browser quando imposti la dimensione del carattere uguale a 16 o un multiplo di 16.
Se guardi l'icona del font Entypo che ho menzionato prima, vedrai che la sua dimensione della griglia di base è 20, il che significa che avresti bisogno di impostare la dimensione del font su 20 o su un multiplo per ottenere risultati più nitidi. Se vuoi mescolare le icone di gruppi di diverse dimensioni della griglia di base, devi solo controllarle nel tuo browser per vedere se la qualità di visualizzazione è accettabile. È possibile visualizzare le dimensioni della griglia per tutti i caratteri Icomoon facendo clic su Visualizza altri tipi di carattere nella parte inferiore della finestra principale dell'app.
Considerando questa considerazione, puoi utilizzare lo strumento di ricerca nella parte superiore dell'app per cercare le icone per nome in modo da poter confrontare più versioni della stessa icona sociale insieme.
Certo, puoi anche solo sfogliare i set, che è un buon modo per perdere un'ora di tempo.
Per scegliere le tue icone, basta fare clic su di esse. Verranno aggiunti automaticamente al tuo set. Quando hai finito, fai clic su Font pulsante in basso e vedrai tutte le icone pronte per il download. Clicca il Scaricare pulsante per ottenere il tuo nuovo carattere personalizzato perfetto e vedrai una casella di testo in cui puoi nominare il tuo carattere - di solito lo chiamo per il cliente per tenerli dritti; in questo caso, lo chiamerò "tutorial".
Cosa succede se si crea questo carattere personalizzato, quindi il cliente decide di aggiungere, per esempio, Vimeo e Instagram ai propri link sui social media il mese prossimo? Devi ricominciare da capo?
No, non lo fai.
Nel tuo download sarà a selection.json file che memorizza tutte le impostazioni del progetto. Tutto quello che devi fare è aprire l'app Icomoon e fare clic Importa icone per caricare il file JSON e le selezioni verranno visualizzate di nuovo. Aggiungere le nuove icone, quindi ricreare il carattere e scaricarlo nuovamente.
Ora arriviamo alle parti semi-ingannevoli.
Carica i quattro file nel / fonts cartella del tuo carattere personalizzato in a / fonts cartella nel tuo tema.
Apri il style.css file nel tuo font personalizzato e copia il file @ Font-face snippet che assomiglia a questo:
Accentsconagua
@ font-face font-family: 'tutorial'; src: url ( 'fonts / tutorial.eot 6npck9?'); src: url ('fonts / tutorial.eot? # iefix6npck9') format ('embedded-opentype'), url ('fonts / tutorial.woff? 6npck9') format ('woff'), url ('font / tutorial. ttf? 6npck9 ') format (' truetype '), url (' fonts / tutorial.svg? 6npck9 # tutorial ') format (' svg '); font-weight: normal; stile font: normale; Quindi, nel tuo tema style.css file, incolla questo snippet. Ricordati di cambiare l'URL in cui i caratteri saranno nel tuo tema se usi qualcosa di diverso dalla directory 'fonts'.
Ci sono due metodi principali per farlo; uno usa una classe per ogni icona per aggiungerli come pseudo-elementi (questo è quello che uso), e l'altro usa un attributo di dati per aggiungerli come elementi reali nel codice HTML.
Ecco un esempio di utilizzo del metodo class-per-icon in un elenco non ordinato. Diciamo che avremo una funzione che posiziona una fila di icone sociali nell'intestazione del tuo tema: in questi screenshot vengono mostrati alcuni esempi di come potresti utilizzare questo.
Entra nel tema del tuo tema functions.php file e aggiungi questo codice:
Quindi, torna al file style.css del tuo font personalizzato e copia lo snippet seguente:
[class ^ = "icon-"], [class * = "icon-"] font-family: 'tutorial'; parla: nessuno; stile font: normale; font-weight: normal; font-variant: normal; Trasformazione del testo: nessuno; altezza della linea: 1; / * Migliore rendering dei font =========== * / -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: in scala di grigi; .icon-facebook: before content: "\ e600"; .icon-twitter: before content: "\ e601"; .icon-pinterest: before content: "\ e602";
Incolla questo frammento nel tuo tema style.css file. Se tutto va come previsto, ora dovresti avere tre icone nell'intestazione e puoi cambiare colore, dimensioni e altri attributi come il testo.
A volte Chrome ha un problema nel rendering dei font di icone: se sembrano incoerenti in Chrome, prova a riordinare il tuo @ Font-face snippet come questo con SVG dopo EOT:
@ font-face font-family: 'tutorial'; src: url ( 'fonts / tutorial.eot 6npck9?'); src: url ('fonts / tutorial.eot? # iefix6npck9') format ('embedded-opentype'), url ('fonts / tutorial.svg? 6npck9 # tutorial') formato ('svg'), url ('font / tutorial.woff? 6npck9 ') format (' woff '), url (' fonts / tutorial.ttf? 6npck9 ') format (' truetype '); font-weight: normal; stile font: normale; L'altro metodo per ottenere icone nel tema è utilizzando gli attributi dei dati per inserirli come elementi. Non sono un grande fan di questo metodo perché significa inserire l'icona all'interno dell'HTML stesso, e ho trovato che sia più confuso. Ma qui andiamo, potresti scoprire che ti piace un metodo più dell'altro.
Nel functions.php, userete attributi di dati come questo:
E nel tuo tema style.css:
[data-icon]: before font-family: 'tutorial'; contenuto: attr (data-icon); parla: nessuno; font-weight: normal; font-variant: normal; Trasformazione del testo: nessuno; altezza della linea: 1; -webkit-font-smoothing: antialiased;
Ora conosci le basi per la creazione e l'utilizzo di caratteri icona personalizzati nel tuo tema WordPress - non troppo difficile. Trova alcune icone che ti piacciono e dai una prova al tuo prossimo progetto.
Ecco alcune risorse per fare il passo successivo. Chissà; potresti trovarti a progettare il tuo font personale ad un certo punto, quando non riesci a trovare il font giusto per quel particolare progetto.
Altri luoghi per generare font di icone personalizzati:
Se desideri maggiori informazioni sull'utilizzo degli attributi dei dati, CSS Tricks ha una buona panoramica.
