Nybörjarens guide till ikonfonter i WordPress

Jag gillar sociala ikoner, jag erkänner det. Jag har bokstavligen dussintals av sociala ikonuppsättningar som jag har samlat in de senaste åren och har till och med skapat några egna uppsättningar för att försöka uppnå den perfekta passformen för ett visst projekt.

Men senast har jag upptäckt ikonfonter, och jag har inte använt de gamla bildikonen på ett tag.

Vad är ikonfonter?

Föreställ dig dingbats av alla slag och stil - sociala ikoner, webbplatsikoner, allt du kan tänka på - bara de är inte bilder: de är faktiskt typsnitt.

Det är en stor sak, för med bildikoner får du bra statiska bilder. Du kan få några olika storlekar av samma bild, men du kan verkligen inte göra någonting med dem annat än använda dem som-är.

En ikon som egentligen är ett teckensnitt är ett helt annat djur. Medan det är sant att ikonerna är enklare i utseende, utgör de för minimalism genom att vara mycket anpassningsbara. Med ett ikonfont kan du enkelt ändra en ikons storlek och färg (precis som textfonter!). Dessutom har ikonens teckensnitt genomskinliga bakgrunder som verkligen fungerar i gamla versioner av Internet Explorer, om du arbetar i en gammal version av IE är ett övervägande för dig.

En annan fördel är att de kan ersätta CSS image sprites. Att använda ett anpassat ikonfonter med ett begränsat antal ikoner fungerar på samma sätt som bildsprites men ger dig möjlighet att ställa in ikoner som text.

Huruvida en ikon typsnitt fungerar bättre än bild ikoner i ditt specifika projekt är upp till dig att bestämma; de har båda fördelarna och nackdelarna. Men för vårt ändamål antar vi att du är redo att försöka ikonfonter och vill veta hur man använder dem i ett WordPress-tema.

För vår handledning lägger vi samman en liten uppsättning ikoner för sociala medier typsnitt för vårt hypotetiska projekt. Vi behöver ikoner för Facebook, Twitter och Pinterest, så låt oss börja.

Custom Icon Font Generators

Det finns ett litet antal teckensnittsgeneratorer på nätet som låter dig skapa anpassade teckensnitt för dig. Du kan skapa anpassade teckensnitt på projekt-för-projekt-basis. det är så bekvämt! Här kommer vi att använda generatorns app från Icomoon, eftersom det är den tjänst jag brukar oftast använda.

Icomons typsnitt generator är kul och lätt att använda - du kan välja mellan ett antal ikon typsnitt gratis och andra som är kommersiella. Jag har funnit kvaliteten på de teckensnitt de erbjuder för att vara mycket höga. Du kan även ladda upp ikonfonter du hittar någon annanstans och använda dem i din anpassade typsnitt. Väldigt händig.

Låt oss bygga vårt anpassade sociala mediaikonfont. Jag antar att du aldrig har gjort det här förut, men oroa dig inte om du behöver hoppa framåt. Vi kommer ikapp.

Handledningen korrekt

Gör din anpassade ikonuppsättning

Starta Icomoon-appen i din webbläsare och så här ser du:

Den fria uppsättningen av grundläggande Icomoon-teckensnitt är laddad, och du kan också se några andra fria ikonfonter också. Jag rekommenderar att du tittar på de andra uppsättningarna som inte laddades, eftersom du kanske hittar något du gillar där. För att visa de andra tillgängliga uppsättningarna bläddra till botten och klicka på Fler ikonuppsättningar.

På nästa skärm ser du ett antal andra fria och kommersiella typsnitt (Entypo är en riktigt fin uppsättning som jag använder ofta, bara FYI). För att lägga till några av dessa i huvudvalet, klicka bara på Lägg till knappen nedanför den uppsättningen.

När du är tillbaka på huvudskärmen, och om du vill ta bort en uppsättning, klicka på menyikonen högst upp till höger och sedan Ta bort Set.

Lägga till din egen ikonfont

Om du har ett eget ikonfont, kanske en du har fått från en klient eller laddad ner från en annan sida, kan du ladda upp det genom att klicka på Importera ikoner knappen längst upp på skärmen och det laddar ikonerna i din uppsättning. Du kan göra teckensnitt från den här uppsättningen precis som de inbyggda Icomoon-teckensæten.

Gör dina val

För vårt projekt letar vi efter sociala ikoner för Facebook, Twitter och Pinterest. Många av de tillgängliga uppsättningarna har några eller alla dessa ikoner, så hur väljer du det?

Att välja ikoner allt från samma uppsättning är en enkel lösning - om en uppsättning som du gillar (och en som passar projektets behov av design) har alla ikoner du behöver, bra. Använd dem. Ibland är det inte så fallet - kanske det som du tycker om har ingen Pinterest-ikon, eller YouTube är en liten ekorre.

Om så är fallet, välj och välj från olika uppsättningar, men var försiktig - Icomoon använder en basnätstorlek för var och en av dess ikonfonter; för Icomoon Free set är nätstorleken 16. Du får de bästa resultaten (det skarpaste utseendet) i en webbläsare när du ställer in teckensnittstorleken lika med 16 eller en multipel av 16.

Om du tittar på ikonen för Entypo-typsnitt som jag nämnde tidigare ser du att dess basnätstorlek är 20, vilket innebär att du måste ställa in din teckensnittstorlek till 20 eller flera av det för att få de skarpaste resultaten. Om du vill blanda ikoner från uppsättningar av olika basnätstorlekar måste du bara kolla in dem i din webbläsare för att se om bildkvaliteten är acceptabel. Du kan se rutnätstorlekarna för alla Icomoon-teckensnitt genom att klicka på Visa fler teckensnitt längst ner i appens huvudfönster.

Med tanke på att övervägande kan du använda sökverktyget längst upp i appen för att leta efter ikoner med namn så att du kan jämföra flera versioner av samma sociala ikon tillsammans.

Naturligtvis kan du bara bläddra i uppsättningarna, vilket är ett bra sätt att förlora en timmes tid.

För att välja dina ikoner, klicka bara på dem. De läggs automatiskt till i ditt set. När du är klar klickar du på Font knappen längst ner och du får se alla dina ikoner redo att ladda ner. Klicka på Ladda ner knappen för att få din nya perfekta anpassade typsnitt och du får se en textruta där du kan namnge ditt teckensnitt - jag brukar namnge det för klienten för att hålla dem raka; i det här fallet ska jag kalla det "handledning."

Återställa dina projektval

Vad händer om du gör den här anpassade teckensnittet, då bestämmer klienten att de vill lägga till, säg Vimeo och Instagram till sina sociala medier länkar nästa månad? Måste du börja från början?

Nej, det gör du inte.

I din nedladdning kommer det att vara en selection.json fil som lagrar alla dina projektinställningar. Allt du behöver göra är att öppna Icomoon-appen och klicka Importera ikoner att ladda upp JSON-filen, och dina val kommer att visas igen. Du lägger till de nya ikonerna, sedan återskapar teckensnittet och laddar ner det igen.

Få din anpassade ikon typsnitt i ditt WordPress Theme

Nu kommer vi till de halva knepiga delarna.

Ladda upp de fyra filerna i / fonter mapp på din anpassade typsnitt till en / fonter mapp i ditt tema.

Öppna style.css filen i din anpassade typsnitt och kopiera @ Font-face snippet som ser ut så här:

@ font-face font-family: 'tutorial'; src: url ( 'typsnitt / tutorial.eot 6npck9?'); src: url ('fonts / tutorial.eot? # iefix6npck9') format ('embedded-opentype'), url ('fonts / tutorial.woff? 6npck9') format ("woff"), url ("teckensnitt / handledning. ttf? 6npck9 ') format (' truetype '), url (' fonts / tutorial.svg? 6npck9 # tutorial ') format (' svg '); typsnitt: normal; typsnittstyp: normal; 

Sedan, i ditt tema style.css fil, klistra in den här siten. Kom ihåg att ändra webbadressen där tecknen kommer att vara i ditt tema om du använder något annat än "fonts" -katalogen.

Infoga enskilda ikoner i din kod

Det finns två huvudsakliga metoder för att göra detta; man använder en klass för varje ikon för att lägga till dem som pseudoelement (det här är det jag använder) och den andra använder en datattribut för att lägga till dem som faktiska element i HTML.

Här är ett exempel på hur du använder klass-per-ikonmetoden i en orörd lista. Låt oss säga att vi får en funktion som placerar en rad sociala ikoner i huvudet på ditt tema - dessa skärmdumpar visar några exempel på hur du kan använda detta.

Gå in i ditt tema functions.php fil och lägg till den här koden:

 

Gå sedan tillbaka till din anpassade ikonfonts stil.css-fil och kopiera följande kod:

[class ^ = "icon-"], [class * = "icon-"] font-family: 'tutorial'; tala: ingen; typsnittstyp: normal; typsnitt: normal; typsnitt variant: normal; text-transform: ingen; linjehöjd: 1; / * Bättre teckensnitt rendering =========== * / -webkit-font-utjämning: antialiased; -moz-osx-font-utjämning: gråskala;  .icon-facebook: före innehåll: "\ e600";  .icon-twitter: före innehåll: "\ e601";  .icon-pinterest: före innehåll: "\ e602"; 

Klistra in det här koden i ditt tema style.css fil. Om allt går som planerat borde du nu ha tre ikoner i ditt huvud och du kan ändra färg, storlek och andra attribut precis som text.

Ibland har Chrome ett ikon för problemavgivande ikoner - om de ser illa ut i Chrome, försök omordna din @ Font-face snippet som detta med SVG efter EOT:

@ font-face font-family: 'tutorial'; src: url ( 'typsnitt / tutorial.eot 6npck9?'); src: url ('fonts / tutorial.eot? # iefix6npck9') format ('embedded-opentype'), url ('fonts / tutorial.svg? 6npck9 # tutorial') format ('svg'), url tutorial.woff? 6npck9 ') format ("woff"), url (' fonts / tutorial.ttf? 6npck9 ') format (' truetype '); typsnitt: normal; typsnittstyp: normal; 

Den andra metoden för att få ikoner i ditt tema är att använda dataattribut för att infoga dem som element. Jag är inte en stor fan av den här metoden eftersom det innebär att ikonen ska placeras i HTML-filen själv, och jag har funnit det mer förvirrande. Men här går vi, du kan hitta dig som en metod mer än den andra.

I functions.php, Du använder dataattribut på följande sätt:

 

Och i ditt tema style.css:

[data-ikon]: före font-family: 'tutorial'; Innehåll: Attr (Data-ikon); tala: ingen; typsnitt: normal; typsnitt variant: normal; text-transform: ingen; linjehöjd: 1; -webkit-typsnitt-utjämning: antialiased; 

Avslutar

Nu vet du grunderna för att skapa och använda anpassade ikonfonter i ditt WordPress-tema - inte för svårt. Hitta några ikoner du gillar och prova på ditt nästa projekt.

Här är några resurser för att ta nästa steg. Vem vet; du kan hitta dig själv att utforma ditt eget ikonfonter vid någon tidpunkt, när du bara inte kan hitta rätt typsnitt för det aktuella projektet.

Medel

Andra ställen att skapa anpassade ikonfonter:

  • Fontello
  • Fontastic
  • IconVault
  • Pictonic
  • Pictos

Om du vill ha mer information om att använda dataattribut har CSS Tricks en bra översikt.

Rulla dina egna ikonfonter

  • Så här skapar du din egen ikon Webfont
  • Mer komplicerat - Skapa en anpassad ikonfont för webben