Share
Sono sicuro che molti di voi che creano temi WordPress hanno avuto bisogno di icone. Le icone sono un ottimo modo per aggiungere visivamente un significato a un pulsante o pubblicare post come tag o permalink. Un font di icone è un ottimo modo per aggiungere facilmente un'icona al tuo tema invece di doverli creare tu stesso.
Ci sono alcuni grandi font di icone là fuori. Se stai usando Bootstrap per il tuo tema, ha il carattere di icone Glyphicons integrato. Per questo post, mi concentrerò su uno dei più popolari: Font Awesome.
Certo, ci sono altri modi per aggiungere icone al tuo tema, ma voglio parlare di alcuni dei benefici dell'uso di un font di icone invece di immagini, sprite, ecc..
Il primo vantaggio (e penso sia il migliore) è che si tratta di un font. Ciò significa che ottieni tutti i vantaggi dello stile che ottieni con il testo normale. Puoi facilmente cambiare il colore e la dimensione di un'icona con un piccolo CSS. Renderà anche il più nitido possibile dal tuo dispositivo. Cioè, non c'è bisogno di preoccuparsi di creare grafici pronti per retina.
Poiché tutte le icone sono incluse in un unico file di font, ciò significa che è solo una richiesta HTTP da caricare. Questo può davvero dare un po 'di prestazioni di caricamento della pagina se si utilizza un numero di icone. Puoi anche includere il CSS necessario per rendere le icone con tutte le altre .css file caricati per il tema.
Esistono diversi modi per aggiungere Font Awesome al tuo tema. Hanno documentato un paio di modi diversi su come aggiungere al tuo sito web sulla loro pagina iniziale.
Probabilmente il modo più semplice per aggiungere Font Awesome al tuo tema è usare BootstrapCDN. Tutto quello che devi fare è aggiungere il seguente al nel tuo tema header.php file:
O, meglio ancora, usa il wp_enqueue_style funzione.
Un altro modo per aggiungere al tuo tema sarebbe quello di abbattere il progetto Font Awesome GitHub e aggiungerlo alla radice del tuo tema. Dovresti quindi accodare il font usando il wp_enqueue_style funzione.
Un modo avanzato è usare Sass o LESS, a seconda di quale stai usando nel progetto del tuo tema. Vorresti aggiungere il font-impressionante cartella nella root del progetto, quindi sarà necessario apportare alcune modifiche.
Apri i tuoi progetti font-impressionante / meno / variables.less o font-impressionante / SCSS / _variables.scss e modifica il @ Fa-font-path o $ Fa-font-path variabile per puntare alla directory dei font in questo modo:
$ fa-font-path: "caratteri";
Dovrai ricompilare il preprocessore di scelta CSS del tuo progetto per raccogliere le modifiche.
Se hai familiarità con Bower, c'è un altro modo avanzato. Dovresti usare i file nel bower_components / font-awesome cartella durante le attività di compilazione anziché aggiungerle al progetto.
Dovresti installare Font Awesome eseguendo bower installa font-awesome --save e questo lo aggiungerebbe al tuo progetto bower.json file. Dovresti quindi avere i file Sass o LESS del tuo tema che puntano ai file appropriati per creare il tuo .css file. Si consiglia inoltre di utilizzare l'attività grunt-contrib-copy per copiare i caratteri nella propria cartella nel progetto.
Puoi vedere come farlo nel mio esempio di progetto.
Dopo aver aggiunto Font Awesome al tuo tema, puoi iniziare a utilizzarli nel tuo tema. Ogni tema è ovviamente diverso, ma ho intenzione di mostrare alcuni esempi di cose che potrebbero essere relativamente universali per la maggior parte dei temi.
Font Awesome è dotato di un certo numero di popolari icone di social network e brand. Il più delle volte un'icona social è un link, quindi possiamo aggiungere la classe icon al tag anchor in questo modo,
Puoi vedere un esempio di aggiunta di più icone nel footer.php file nel mio progetto di esempio qui.
Un altro ottimo posto per usare le icone è nei metadati dei tuoi post come ho detto in precedenza. I tre che ho aggiunto nel progetto di esempio sono i link commenti, i tag e il permalink.
Ecco alcuni esempi per ognuno:
Aggiungi nuovo ',' standard '), __ (' 1 ',' standard '), __ (' %', 'standard' ),","); ?>
Accentsconagua
'. __ ('% 1 $ s', 'tuts-font-awesome'). '', $ tag_list); ?> ">
Puoi vedere tutti questi esempi nei miei progetti di esempio loop.php file qui.
L'ultimo esempio sono i collegamenti post paginazione. Mi piace aggiungere galloni di fronte a "Older" e prima di "Newer". Se stai usando il next_posts_link e previous_post_links nel tuo progetto, ti consigliamo di aggiungere uno span con la classe appropriata in questo modo:
Older ',' tuts-font-awesome ')); ?>',' tuts-font-awesome ')); ?>Puoi vedere tutti questi esempi nei miei progetti di esempio pagination.php file qui.
Ora dovresti avere tutto per iniziare con Font Awesome nel tuo tema WordPress. Ho dato un paio di esempi in cui mi sono ritrovato a usare frequentemente le icone. Font Awesome è molto più impressionante che puoi provare come icone impilabili, rotanti e animate. Suggerirei di dare un'occhiata alla pagina Font Awesome Examples per tutte le altre meraviglie.
