Share
Jeg er sikker på at mange av dere som lager WordPress-temaer, har hatt behov for ikoner. Ikoner er en fin måte å visuelt legge til mening på en knapp eller legge til relaterte lignende tagger eller permalinks. Et ikon skrift er en fin måte å enkelt legge til et ikon satt til temaet ditt i stedet for å måtte lage dem selv.
Det er ganske mange gode ikonfonter der ute. Hvis du bruker Bootstrap for temaet ditt, har den Glyphicons-ikonet skrifttypen innebygd. For dette innlegget skal jeg fokusere på en av de mest populære: Font Awesome.
Jo, det er andre måter å legge til ikoner på temaet ditt, men jeg vil snakke om noen fordelene med å bruke et ikonfont i stedet for bilder, sprites osv..
Den første (og jeg tror best) fordel er at den er en skrifttype. Dette betyr at du får alle fordelene med styling som du får med vanlig tekst. Du kan enkelt endre farge og størrelse på et ikon med et lite CSS. Det vil også gjengi så skarp som enheten vil tillate. Det vil si at det ikke er nødvendig å bekymre seg for å lage retina klar grafikk.
Siden alle ikonene er inkludert i en skrifttypefil, betyr det at det kun er én HTTP-forespørsel å laste. Dette kan virkelig gi deg ganske mye sidebelastningsytelse hvis du bruker et antall ikoner. Du kan også inkludere CSS som trengs for å gjøre ikonene med det andre .css filer du laster inn for temaet ditt.
Det er flere måter å legge til Font Awesome til temaet ditt. De har dokumentert et par forskjellige måter på hvordan å legge til nettstedet ditt på startsiden deres.
Sannsynligvis er den enkleste måten å legge Font Awesome på temaet ditt å bruke BootstrapCDN. Alt du trenger å gjøre er å legge til følgende i i temaet ditt header.php fil:
Eller, enda bedre, bruk wp_enqueue_style funksjon.
En annen måte å legge til temaet ditt, er å trekke ned Font Awesome GitHub-prosjektet og legge det til roten til temaet ditt. Du vil da trenge enqueue fonten ved hjelp av wp_enqueue_style funksjon.
En avansert måte er å bruke Sass eller LESS, avhengig av hvilken du bruker i temaets prosjekt. Du vil legge til font-awesome mappe inn i prosjektets rot, så må du gjøre noen endringer.
Åpne prosjektet ditt font-kjempe / mindre / variables.less eller font-awesome / SCSS / _variables.scss og rediger @ Fa-font-bane eller $ Fa-font-banen variabel for å peke på fontkatalogen din slik:
$ fa-font-path: "skrifter";
Du må kompilere prosjektets CSS preprosessor til valg for å plukke opp endringene.
Hvis du er kjent med å bruke Bower, er det enda en avansert måte. Du vil bruke filene i bower_components / font-awesome mappe under oppgaver i stedet for å legge dem til prosjektet ditt.
Du må installere Font Awesome ved å kjøre bower install font-awesome - save og det ville legge det til prosjektet ditt bower.json fil. Du vil da måtte ha temaet ditt Sass eller MINDRE filer peker på de aktuelle filene for å bygge din .css fil. Du kan også bruke Grunt-bidrag-kopien oppgaven til å kopiere skriftene til din egen mappe i prosjektet.
Du kan se hvordan du gjør dette i mitt eksempelprosjekt.
Når du får Font Awesome lagt til temaet ditt, kan du begynne å bruke dem i temaet ditt. Hvert tema er åpenbart annerledes, men jeg skal vise noen eksempler på ting som kan være relativt universelle for de fleste temaer.
Font Awesome kommer med en rekke populære sosiale nettverk og merkeikonene. Mesteparten av tiden er et sosialt ikon en lenke, så vi kan legge til ikonklassen til ankermerket som det,
Du kan se et eksempel på å legge til flere ikoner i footer.php filen i mitt eksempelprosjekt her.
Et annet flott sted å bruke ikoner er i metadataene til innleggene dine som jeg tidligere nevnte. De tre som jeg la til i eksempelprosjektet, er kommentarene, kodene og permalinken.
Her er eksempler for hver enkelt:
Legg til nytt ',' standard '), __ (' 1 ',' standard '), __ (' % ',' standard '), ","); ?>
Accentsconagua
'. __ ('% 1 $ s', 'tuts-font-awesome'). '', $ tag_list); ?> ">
Du kan se alle disse eksemplene i mitt eksempelprosjekt loop.php filen her.
Det siste eksemplet er postpagineringskoblingene. Jeg liker å legge til chevrons foran "Eldre" og før "Nyere". Hvis du bruker next_posts_link og previous_post_links i prosjektet ditt, vil du legge til et spann med den aktuelle klassen slik:
Eldre ',' tuts-font-awesome ')); ?>',' tuts-font-awesome ')); ?>Du kan se alle disse eksemplene i mitt eksempelprosjekt pagination.php filen her.
Du bør nå ha alt for å komme i gang med Font Awesome i WordPress-temaet ditt. Jeg ga et par eksempler hvor jeg har funnet meg selv å bruke ikoner ofte. Det er mye mer fantastisk å Font Awesome som du kan prøve, for eksempel stabling, roterende og animerte ikoner. Jeg vil foreslå å ta en titt på Font Awesome Examples-siden for all ekstra awesomeness.
