I det moderna internets begynnelse var ikoner lätt tillgängliga, men att använda dem effektivt i WordPress var lite svårare. Du kunde komma runt några av problemen genom att använda sprites, men de var inte alltid en bra väg framåt, och när retinaskärmar började dyka upp på marknaden förstorades problemet (bokstavligt talat).
En av de vanligaste lösningarna på detta problem är att använda ett ikontypsnitt. Ikoner är webbtypsnitt eller vektorer, så att du kan skala dem oändligt och en hel del ikoner kan få plats i en enda fil, vilket skär ner på dina filförfrågningar avsevärt. Detta gör att du kan använda nästan vilken ikon du än kan drömma om. Men med detta kommer också några prestandaproblem.
I den här artikeln visar vi dig ett par olika sätt att använda WordPress ikontypsnitt, var du kan skaffa dem, och vilken metod som kan vara bäst för din webbplats.
- Var du kan hitta ikontypsnitt
- Snabba och enkla sätt att använda ikontypsnitt
- Prestandaproblem att överväga med ikontypsnitt
- Hosta ikontypsnitt lokalt (endast de du behöver)
- Tillgänglighetsproblem för ikontypsnitt
Var du kan hitta ikontypsnitt
Det finns numera många bra ställen att hitta ikontypsnitt för din WordPresswebbplats. Skriv bara in ”ikontypsnitt” i Google och du kommer att få flera bra resultat. En av de mest populära och mest använda är Font Awesome. I skrivande stund har de 1 400+ gratis ikoner, samt 4 500+ ikoner i sin pro-version. Detta inkluderar ikoner för nästan allt, från gränssnitt, till sociala medier, pilar, och många andra typer av ikoner.
Här är några andra du kan kolla in:
- IcoMoon är en annan populär tjänst med 5 500+ gratis vektorikoner och 4 000+ premiumikoner. Vi kommer faktiskt att använda deras ikontypsnittsgeneratorverktyg längre ned.
- Fontello är en annan mycket bra tjänst som hjälper dig att upptäcka och bygga ikontypsnitt.
- Om du letar efter en superlätt ikonuppsättning, se till att kolla in Bytesize. Alla 84 ikoner blir tillsammans 9KB (2 KB i SVGZ, eller Gzippade).
- Om du bara vill använda SVG-ikoner manuellt finns det inget bättre gratis bibliotek än iconmonstr eller ett bättre premiumbibliotek än Iconfinder.
Snabba och enkla sätt att använda WordPress ikontypsnitt
Först ska vi dyka in några av de snabba och enkla sätten du kan använda WordPress ikontypsnitt. Kom dock ihåg att inte alla dessa sätt är bra när det gäller prestanda. För det rekommenderar vi att du hoppar ner till avsnittet om den bästa metoden.
Alternativ 1 – Använd ett WordPress-plugin
Det snabbaste sättet att komma igång med WordPress ikontypsnitt är att helt enkelt använda ett tredjepartsplugin. Det kostnadsfria Font Awesome Integration-pluginet innehåller det senaste ikonbiblioteket från Font Awesome 5. När du har installerat och aktiverat det behöver du bara en enkel kortkod för att infoga en ikon. De har till och med en WordPress-ikon nu! Ganska coolt.
Du kan kolla in Font Awesome 5:s grundläggande användningsdiagram för fler sätt att använda och anpassa det, liksom deras ikonbibliotek. Nedan infogade vi till exempel WordPress Font Awesome-ikonen i ett Gutenberg kortkodsblock och la till fa-3x att göra den tre gånger större.
[fawesome iclass="fab fa-wordpress fa-3x"]
Så här ser det ut på frontenden. Ganska lätt eller hur? Vi fick en Font Awesome-ikon på vår webbplats på bara några minuter.
Om du vill ha en hel del lättanvända kortkoder, kan du också kika på pluginet Shortcodes Ultimate. De har ett premiumtillägg för ikoner som du kan använda.
Ovanstående är en bra lösning om du vill låta dina kunder lägga till ikoner till inlägg eller sidor, men om du vill använda dessa element inom ditt tema eller plugin är det bäst att köa dem själv (vi kommer att prata om detta längre fram).
Alternativ 2 – Använd inbyggda Dashicons
Dashicons är en uppsättning ikontypsnitt som ingår som standard eftersom WordPress använder det på backenden. Du måste köa det på frontenden, men allt du behöver är namnet på skriptet, filen finns redan tillgänglig för WordPress.
Du kan lägga till följande till din functions.php-fil annars rekommenderar vi att du använder ett gratis plugin som CodeSnippets. Detta minimerar risken för att bryta ditt tema och ändringarna kommer också att sparas vid temauppdateringar.
function my_theme_styles() {
wp_enqueue_style( 'dashicons' );
}Du kan sedan gå till Dashicons webbplats, välja en ikon och klicka på länken ”Kopiera HTML” som ger dig den kod du behöver för att visa ikonen. De har inte ett stort urval, men de fungerar fortfarande bra och är mycket lätta.
<span class="dashicons dashicons-admin-post"></span>Nedan infogade vi till exempel instrumentpanelsikonen i ett Gutenberg HTML-block.
Så här ser det ut på frontenden.
Dashicons har inga coola kortkoder direkt från början, men du kan anpassa storleken på dina ikoner med CSS. Här är ett exempel på att infoga en ikon precis före en rubrik.
<h2 class="dashicons-before dashicons-smiley">My Cool Headline</h2>Alternativ 3 – Länka manuellt till externt hostade ikontypsnitt
Ditt tredje alternativ är att manuellt länka till ett externt hostat ikontypsnitt. Detta är i princip vad pluginet i alternativ 1 ovan gör, fast bakom kulisserna.
För Font Awesome kan du hämta koden från deras startsida och sedan följa stegen nedan. De hostar alla sina teckensnitt på ett CDN helt gratis. Det kommer att se ut så här:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-xxxxx" crossorigin="anonymous">Steg 1
Kopiera koden till <head> för varje mall eller sida på din WordPress-webbplats där du vill använda Font Awesome. Du kan redigera temats header.php-fil eller ännu bättre, följ vår enkla handledning om hur du infogar kod i ditt sidhuvud.
Steg 2
Du kan sedan börja lägga in ikoner i din HTML-kods <body>. Hitta rätt ikon och lär dig att lägga till den på din sida.
Prestandaproblem att överväga med ikontypsnitt
Medan det inte är något fel med att använda ett av ovanstående sätt att lägga till ikontypsnitt på din webbplats, är det inte tekniskt sett det bästa sättet. Varför? Allt handlar om prestanda.
Du behöver förmodligen inte alla dessa ikoner
Först av allt, när du använder ett plugin för ikontypsnitt eller länkar till ett externt ikontypsnittsbibliotek, kommer det att ladda alla ikoner i hela biblioteket. Om du bara använder 20 ikoner eller så på hela din webbplats, kan detta hanteras på ett mycket bättre sätt.
Till exempel inkluderade vi Font Awesome 5-biblioteket på vår webbplats och medan CSS-filen för den är liten är typsnittsfilen i sig 108 KB. Även om detta kanske inte verkar så stort, kommer du se längre fram hur liten filen faktiskt blir när vi bara väljer de HTML-typsnitt vi faktiskt använder.
Ladda från ett CDN är vanligtvis snabbare
För det andra är det inget fel med att ladda skript från olika CDN – innehållsleveransnätverk. Men om du har möjlighet att ladda filen från endast ett CDN är detta vanligtvis snabbare. Varför? Då kan det dra nytta av en enda HTTP/2-anslutning och minskar ytterligare DNS-uppslagningar. Se bara till att ditt CDN är bra!
Hosta ikontypsnitt lokalt (endast de du behöver)
På grund av de prestandaskäl som vi nämnt ovan, kommer vi att gå igenom hur du hostar dina ikontypsnitt lokalt, samt hur du bara använder de du behöver. Med lokalt menar vi antingen att ladda dem från din WordPress-värdserver eller ditt eget CDN.
Genom att välja endast ikontypsnitten du behöver, kan detta få ner filstorleken från 100 KB till ett par kilobyte, ganska praktiskt! Ännu bättre: du kan även blanda ikoner från olika typsnitt.
Grunderna – hur det fungerar
Att använda ett ikontypsnitt innebär att hosta typsnittsfilen (WOFF, WOFF 2, etc.) på din webbserver, sedan använda CSS för att hämta typsnittet, sedan skapa lite markering för att lägga till ikonerna på rätt plats.
Medan din webbplats kommer att ladda en enda fil, kommer du faktiskt få ett antal filformat för varje typsnitt eftersom vissa webbläsare använder olika format. Font Awesome inkluderar 6 olika filformat: EOT, SVG, TTF, WOFF, WOFF 2 och OTF. Men på grund av webbläsarstöd behöver du egentligen bara WOFF eller WOFF 2.
Tips: WOFF stöds av 93%+ av alla moderna webbläsare. WOFF 2 komprimeras dock mer, men stöds endast av 83%+ av alla moderna webbläsare. Vi rekommenderar att du väljer den ena eller den andra eller båda. Baserat på din kod kommer webbläsaren avgöra vilken den ska leverera till klienten.
Din första uppgift är att använda ett verktyg för att välja endast de ikoner du vill ha. Du kan sedan lägga till dessa filer i din projektkatalog någonstans, vanligtvis i en typsnittskatalog.
Därefter lägger du till Font Awesome CSS-filen i ditt projekt och lägger till det på din webbplats med ett gammalt hederligt länkelement.
<link rel="stylesheet" href="css/font-awesome.min.css">Du kan också köa CSS-filen, eller om den är liten helt enkelt använda den inline.
Om du tittar på CSS-filen kan du se vad som händer i bakgrunden. Typsnittsfilerna laddas, grundelementet med klassen .fa definieras (tillsammans med några andra), och till sist definieras varje namngiven ikon (t.ex.: .fa-book).
Det enda du behöver vara uppmärksam på är sökvägen till dina typsnittsfiler. Som standard laddas de från ../fonts som kommer att vara typsnittskatalogen, en mapp högre än den aktuella CSS-filen. Du kan behöva ändra detta för att passa din egen katalogstruktur.
Nu när du har en bättre uppfattning om hur det fungerar kommer vi att gå igenom hur man gör det steg för steg. I det här exemplet använder vi en aktiv e-handelsplats.
Steg 1
Först bör du bestämma vilket ikontypsnittsbibliotek du vill använda. Vi delade några vi gillar i början av denna artikel. I detta exempel kommer vi att använda Font Awesome tillsammans med IcoMoons typsnittsgenerator. Om du vill ha WOFF 2-filerna från IcoMoon måste du betala en engångsavgift på $9,00 för att få tillgång till deras premiumbibliotek.
Du kan manuellt ladda ner de Font Awesome-ikoner du vill ha gratis, men du skulle behöva använda ett verktyg som FontForge för att manuellt redigera deras WOFF- eller WOFF 2-fil. Vi gillar när det är enkelt, så vi använder en generator.
Steg 2
Gå över till IcoMoon-generatorn. Vi klickar på ”Lägg till” på Font Awesome-biblioteket.
Steg 3
Därefter ska du välja de ikoner du vill använda på din WordPress-webbplats. Om du redan använder Font Awesome och helt enkelt flyttar till lokalt hostade versioner, gör en kort lista och välj dem sedan från biblioteket.
I det här exemplet väljer vi ut ikoner för perfmatters.io, en WordPress-driven e-handelswebbplats som kör Easy Digital Downloads.
Steg 4
När du har valt ut alla dina ikoner, välj ”Generera typsnitt” längst ner. För denna webbplats behövde vi 20 ikoner.
Du kommer att få filer som ser ut så här. De viktiga filerna som du behöver är styles.css-filen och typsnittsfilerna (WOFF, WOFF 2).
Steg 5
Därefter rekommenderas det att du utför en sök-och-ersätt i styles-css-filen innan du laddar upp/kopierar den till din webbplats. Så här ser den ursprungliga filen ut.
För er som redan använder Font Awesome, gör detta det helt enkelt lättare att ändra klasserna över till Font Awesome-versionen. Om något redan var kodat på din WordPress-webbplats med Font Awesome, kommer det därmed automatiskt att börja använda ikonerna.
Så gör en Sökning efter ordet ”icon” och ersätt alla förekomster av det med ”fa”. Du bör kunna göra en snabb sök-och-ersätt med en textredigerare som Sublime.
Detta ersätter [class^="icon-"], [class*=" icon-"] med [class^="fa-"], [class*=" fa-"]. Det fixar okså varje ikon, så istället för att de börjar med .icon-, börjar de nu med.fa-.
Du kan också behöva ändra källadressen baserat på var du laddar upp dina typsnittsfiler i steg 7. Vi rekommenderar att du ändrar den webbadressen till ditt CDN.
Steg 6
Därefter måste du lägga till CSS-stylingen till din webbplats. Det finns ett par sätt att göra detta på.
Alternativ 1
Eftersom mängden CSS är mycket liten, kan du kopiera hela filens CSS och klistra in den i WordPress Customizer. Gör aldrig detta för stora filer, men det här är en relativt liten mängd CSS. Det betyder att stylingen kommer att laddas inline på din webbplats.
Alternativ 2
Du kan länka till din stilmall manuellt genom att placera den i sidhuvudet på din WordPress-webbplats. Tips: Länka till den på ditt eget CDN för snabbare prestanda.
<link rel="stylesheet" href="https://cdn.yourdomain.com/fonts/style.css">Alternativ 3
Du kan också köa CSS-filen i WordPress. Processen liknar det manuella sättet väldigt mycket. Lägg till följande i temats functions.php-fil, eller använd det kostnadsfria pluginet Code Snippets. Du kan behöva ändra katalogen baserat på var du laddat upp den.
function my_theme_styles() {
wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );Steg 7
Nu när du har lagt till din CSS på din webbplats, är det dags att ladda upp typsnittsfilerna. Du kan lägga typsnitten var som helst, men en mapp som heter ”typsnitt” i din /public-katalog är en bra plats. Kom dock ihåg att källmappen i din styles.css-fil måste matcha.
Steg 8
Nu borde din WordPress-webbplats ha både dina CSS- och typsnittsfiler tillgängliga. Därefter kan du lägga till lite uppmärkning till din webbplats. Detta är bara ett exempel på att lägga till en kuggikon.
<i class="fa fa-cog"></i>Du kan se ett levande exempel på hur detta fungerar över på perfmatters.io. Kom ihåg att du kan använda vilket element som helst, inte bara i. Förutom att lägga till CSS i dina anpassade klasser, kan du också använda vanliga span-element.
Den verkliga skillnaden ser du när du tar en titt på storleksskillnaden. Kom ihåg att när vi länkade till Font Awesomes externa bibliotek var den totala storleken typsnittsfilen 108 KB. När vi använde en typsnittsgenerator och valde endast de Font Awesome-ikoner vi behövde för webbplatsen, krympte det ner typsnittsfilen till 2,6 KB. Vår typsnittsfil minskade i storlek med enorma 97,59%!
Inte bara det, men det laddas nu också från vårt CDN, vilket innebär att det inte finns några extra DNS-uppslagningar till fontawesome.com.
Du kan också använda samma tillvägagångssätt med SVG-ikoner, det är bara lite annorlunda.
Tillgänglighetsproblem för ikontypsnitt
En nackdel med ikontypsnitt är deras fruktansvärda tillgänglighet. Skärmläsare kan hoppa över dem, eller ännu värre, läsa dess unicode eller själva tecknen. Detta skulle resultera i att synskadade personer hör ”gul stjärna favoriter” när de tittar på menyalternativet favoriter – inte idealiskt. Du bör också ta hänsyn till vad som händer om typsnittet inte laddas.
Det bästa vore om dekorativa ikoner helt enkelt försvinner när de inte laddas och att viktiga ikoner skulle ersättas med text om det uppstår ett problem.
Tillgänglighetsproblemet är ganska lätt att lösa; använd helt enkelt aria-hidden="true" -parametern och värdet för att indikera att skärmläsarna ska ignorera vårt element.
<span class="icon icon-star" aria-hidden="true"></span> My FavouritesOm du vill göra det lite grundligare kan du också använda Modernizr för att testa typsnittet. Du måste ändra CSS-stylingen något, se den utmärkta Bulletproof Font Icons-artikeln för mer djupgående information.
För information om hur du kan skapa en text-reservlösning för viktiga ikoner rekommenderar vi också att du läser artikeln ovan, eftersom de har förklarat och löst problemet så bra som möjligt, men att implementera det är lite utanför ramen för den här artikeln.
Sammanfattning
Det är allt vi har att säga om ikontypsnitt. Nu känner du till ett par olika sätt att enkelt lägga in ikontypsnitt på din WordPress-webbplats, och det bästa sättet att implementera dem när det gäller prestanda.
Vi rekommenderar alltid att du använder en typsnittsgenerator för att bygga ett ikontypsnitt som bara består av de ikoner du använder. Detta kommer att göra ditt tema betydligt mer enhetligt och smidigt! Om du har ett favoritbibliotek eller generator som vi inte nämnde, tala gärna om det för oss. Det finns många där ute som är riktigt bra! Se också till att läsa vår djupgående guide om WordPress-typsnitt.
Brian har stor passion för WordPress och har använt det i över ett årtionde, han har till och med utvecklat ett par premium-plugins. Brian gillar att blogga, kolla filmer och hiking. Ta kontakt med Brian via Twitter.
Lämna ett svar