Share
Jag är säker på att många av er som skapar WordPress-teman har haft ett behov av ikoner. Ikoner är ett bra sätt att visuellt lägga till mening till en knapp eller postrelaterade liknande taggar eller permalink. En ikon typsnitt är ett bra sätt att enkelt lägga till en ikon som är inställd på ditt tema istället för att behöva skapa dem själv.
Det finns en hel del stora ikon typsnitt där ute. Om du använder Bootstrap för ditt tema har den Glyphicons-ikonen inbyggd. För det här inlägget kommer jag att fokusera på en av de mest populära: Font Awesome.
Visst, det finns andra sätt att lägga till ikoner till ditt tema, men jag vill prata om några fördelar med att använda ett ikonfontsnitt istället för bilder, sprites etc.
Den första (och jag tror bäst) är att det är en typsnitt. Det innebär att du får alla fördelarna med styling som du får med vanlig text. Du kan enkelt ändra färg och storlek på en ikon med lite CSS. Det kommer också att bli så skarp som din enhet tillåter. Det är inte nödvändigt att oroa sig för att skapa näthinnan klar grafik.
Eftersom alla ikoner ingår i en fontfil, betyder det att det bara är en HTTP-begäran att ladda. Detta kan verkligen ge dig en hel del sidbelastningsprestanda om du använder ett antal ikoner. Du kan också inkludera CSS som behövs för att göra ikonerna med alla andra .css filer du laddar för ditt tema.
Det finns ett antal sätt att lägga till Font Awesome i ditt tema. De har dokumenterat ett par olika sätt på hur man lägger till på din webbplats på deras startsida.
Förmodligen är det enklaste sättet att lägga till Font Awesome i ditt tema att använda BootstrapCDN. Allt du behöver göra är att lägga till följande i i ditt tema header.php fil:
Eller, ännu bättre, använd wp_enqueue_style fungera.
Ett annat sätt att lägga till ditt tema skulle vara att dra ner Font Awesome GitHub-projektet och lägga till det i roten till ditt tema. Du skulle då behöva förenkla teckensnittet med hjälp av wp_enqueue_style fungera.
Ett avancerat sätt är att använda Sass eller LESS, beroende på vilket du använder i ditt temas projekt. Du skulle vilja lägga till font-häftigt mapp i projektets rot, så måste du göra några ändringar.
Öppna ditt projekt font-häftigt / mindre / variables.less eller font-häftigt / SCSS / _variables.scss och redigera @ Fa-font-path eller $ Fa-font-väg variabel för att peka på din typsnittskatalog som så:
$ fa-font-path: "teckensnitt";
Du kommer att behöva omkompilera ditt projekts CSS-förprocessor till valet för att hämta ändringarna.
Om du är bekant med att använda Bower, finns det ännu ett avancerat sätt. Du skulle använda filerna i bower_components / font-häftigt mapp under dina bygguppgifter istället för att lägga till dem i ditt projekt.
Du måste installera Font Awesome genom att köra bower installera font-awesome - save och det skulle lägga till det i ditt projekt bower.json fil. Du skulle då behöva ha temat Sass eller LESS-filer peka på lämpliga filer för att bygga din .css fil. Du kanske också vill använda grunt-bidragsuppgiften för att kopiera teckensnitt till din egen mapp i ditt projekt.
Du kan se hur du gör det i mitt exempelprojekt.
När du har fått Font Awesome lagt till ditt tema kan du börja använda dem i ditt tema. Varje tema är uppenbart annorlunda, men jag kommer att visa några exempel på saker som kan vara relativt universella för de flesta teman.
Font Awesome kommer med ett antal populära sociala nätverk och varumärkesikoner. För det mesta är en social ikon en länk, så vi kan lägga till ikonklassen till ankaretiketten som så,
Du kan se ett exempel på att lägga till flera ikoner i footer.php filen i mitt exempelprojekt här.
Ett annat bra ställe att använda ikoner är i metadata för dina inlägg, som jag tidigare nämnde. De tre som jag lade till i exemplet projektet är kommentarlänken, taggarna och permalinken.
Här är exempel på var och en:
Lägg till ny ',' standard '), __ (' 1 ',' standard '), __ (' % ',' standard '),', '); ?>
Accentsconagua
'. __ ('% 1 $ s', 'tuts-font-awesome'). '', $ tag_list); ?> ">
Du kan se alla dessa exempel i mitt exempelprojekt loop.php filen här.
Det sista exemplet är postpaginationslänkarna. Jag gillar att lägga till chevrons framför "Older" och före "Nyare". Om du använder next_posts_link och previous_post_links i ditt projekt vill du lägga till en spännvidde med lämplig klass som så:
Äldre ',' Tuts-font-awesome ')); ?>',' tuts-font-awesome ')); ?>Du kan se alla dessa exempel i mitt exempelprojekt pagination.php filen här.
Du borde nu ha allt för att komma igång med Font Awesome i ditt WordPress-tema. Jag gav ett par exempel där jag själv funnit att använda ikoner ofta. Det finns mycket mer grymt till Font Awesome som du kan testa, till exempel stapling, rotering och animerade ikoner. Jag skulle vilja föreslå att du tittar på sidan "Font Awesome Examples" för alla extra awesomeness.
