Ikonteckensnitt är symboler, snarare än bokstäver, som låter dig lägga till vektorikoner på din webbplats utan att sakta ner den, eftersom du inte skulle använda stora grafikfiler, utan teckensnittsfiler. Oavsett om det är bokstäver eller ikoner är typsnitt i sig själva grafik och har fler användningsområden än bara text. I den här artikeln kommer vi att diskutera hur du lägger till ikonteckensnitt på din WordPress-webbplats. Men låt oss först diskutera de situationer där du kanske vill använda dem.
När kan jag använda mina ikonteckensnitt?
Den uppenbara fördelen med ikonteckensnitt jämfört med konventionella bildbaserade ikoner är hastigheten: en teckensnittssymbol, som är en vektorgrafik, laddar lika oavsett storlek varje ikon tar upp på din skärm. Icke-vektorgrafik förlorar kvalitet när den skalas upp och blir suddig. De är också mycket svåra att manipulera och kan kräva att du använder bildredigerare för att skapa flera versioner av varje grafik och sedan pilla med dina webbplatsinställningar tills du har sett till att varje enhet som din besökare använder visas den optimala versionen av varje grafisk.
Omvänt är typsnitt (inklusive ikonteckensnitt). lätt skalbar utan kvalitetsförlust, de är bokstavligen gjorda för att stylas med färger och skuggor, om det behövs, och är allmänt lätt, särskilt i jämförelse med annan grafik.
Ett ikonteckensnitt innehåller vanligtvis vanliga symboler för olika onlinefunktioner, som t.ex mappar, chattbubblor, pilar, mappar, nålar och liknande. De finns väldigt ofta i navigeringsmenyer, men du kan använda dem var som helst där du annars skulle använda en bild för att indikera en vanlig funktion. Det kommer också ev spara lite tid och pengar på ikondesign – trots allt, allt du behöver är ett heltäckande typsnitt.
Det finns gott om ikonteckensnitt att välja mellan, men våra föredragna är Typsnitt fantastiskt och Font Elegant. För den här demonstrationen kommer vi mest att använda Font Awesome. Här är vad vi kommer att täcka:
Förutom de metoder som beskrivs ovan kan du lägga till dina ikonteckensnitt som anpassade typsnitt, precis som du skulle göra med alla andra teckensnitt. Vi kommer inte att diskutera den här metoden här, eftersom vi redan har behandlat att lägga till anpassade teckensnitt till WordPress på djupet i en annan artikel.
Om du är en nybörjare av WordPress och inte känner dig bekväm med att lägga till nya typsnitt till ditt tema genom att modifiera temafilerna – helt förståeligt – så är en plugin förmodligen ett bra alternativ för dig. Plugin-programmet vi kommer att använda är Bättre typsnitt Awesome. Du måste installera och aktivera den från plugins-delen av din WordPress-instrumentpanel.
Och det är det, din webbplats kommer nu att ha Font Awesome-stöd.
Men för att kunna använda själva ikonerna behöver du något annat: en kortkod. En kortkod är en kodbit med en enkel funktion. I det här fallet är det för att visa en ikon. För att använda Font Awesome-ikoner måste du först veta vad de heter och hur de ser ut. Du kan göra det enkelt med detta fusklapp tillhandahålls av utvecklarna av typsnittet.
Därefter, för att lägga till dina teckensnittskortkoder på din webbplats, helt enkelt lägg till ett kortkodsblock om du använder Gutenberg-blockredigeraren, ett kortkodselement om du använder Elementor, eller skriv bara in kortkoden där du behöver den om du använder den klassiska editorn (se till att du har bytt till textredigeringsläget). Vi kommer att visa dig hur du gör med Gutenberg. Vi kommer att lägga till kortkoden i ett inlägg, men det fungerar på samma sätt för alla delar av din webbplats som kan acceptera en kortkod.
Genom att klicka på plus tecken får du upp blockmenyn. Sök efter ett kortkodsblock och klistra in den kortkod du gillar. Du kan hitta en ikons namn på fuskbladet och lägga till det i kortkoden: [icon name=”iconname”]
Säg nu att den slumpmässigt genererade texten vi använder beskriver en dryck. Som vinjett i texten kommer vi att använda [icon name=”beer”] kortkod mellan två textblock.
Du kan också använd dessa kortkoder inom textblock, ungefär som kulor. Till exempel kommer vi att inleda det sista stycket med en annan ikon, med kortkoden [icon name=”arrow-circle-right”].
Och dina ikoner kommer att synas som en del av texten på din sida.
En annan funktion med denna plugin är att den uppdateras automatiskt: om det finns en ny version av Font Awesome kommer du inte att bli kvar! För mer om hur du uppdaterar plugins kan du kolla vår praktiska steg-för-steg-handledning.
En populär visuell redigerare, Elementor låter dig enkelt använda ikonteckensnitt. Faktum är att Elementor kommer med Font Awesome redan integrerat. För att lägga till en ikon med Elementor, börja redigera ett inlägg i Elementor och hitta Ikon element i menyn till vänster och dra det dit du vill ha det.
Nu har vi standarden, platshållarikonen. För att välja en annan ikon, klicka helt enkelt på ikonbilden till vänster medan ditt ikonelement är valt. Du kan se att den har en blå kant runt sig.
Välj ikonen som du gillar och klicka på Infoga för att infoga den istället för platshållaren. Vi har valt en klockikon från Font Awesome – Vanligt ikonuppsättning.
På samma flik kan du lägga till en länk eller ändra ikonens justering, som vi har.
Du kan ändra dess färg i Stil fliken medan din ikon är vald.
Och nu vet du hur man använder ikoner i Elementor. Det finns många andra alternativ för stil och funktionalitet för dina ikoner i Elementor, men nu vet du grunderna.
Vi kommer att visa dig den enklaste metoden för att lägga till Font Awesome-ikoner, en omfattande och ständigt uppdaterad ikonuppsättning, till din WordPress-webbplats med hjälp av kod. Först måste du gå till Typsnitt fantastiskt webbplats och klicka på Starta gratis knapp.
Därefter måste du ange Font Awesome med din e-postadress och klicka Skicka kitkod.
Därefter måste du kontrollera din e-postadress och konfigurera ditt konto. Följ bara anvisningarna på skärmen tills du kommer till skärmen med din kod. Klick Kopiera kitkod att kopiera den.
Slutligen måste du kopiera den här koden till ditt tema header.php fil. Du hittar den genom att navigera till Utseende/tema redaktör från din WordPress-instrumentpanel. Det kommer att finnas i menyn längst till höger.
Klistra bara in kitkoden du kopierade precis under taggen så är du klar.
Slutligen kan du också lägga till Font Awesome-ikoner till din WordPress-webbplats individuellt, direkt från utvecklarens bibliotek. Du behöver inget plugin eller något annat för att göra det, du kan helt enkelt använda en ikon du gillar. För att göra det, gå helt enkelt till Font Awesome ikoner galleri och hitta en ikon du gillar.
Klicka på den så hittar du koden du behöver för att bädda in den.
För att lägga till din ikon måste du lägga till den med kod. För Classic-redigeraren fungerar det bara genom att klistra in koden där du vill ha den, med hjälp av textläget. I Gutenberg använder vi Anpassad HTML blockera. I Elementor behöver du Anpassad HTML element, men principen är densamma. Klistra bara in koden du fick från ikonbiblioteket.
Och din ikon kommer att vara precis där du lägger den!
Sammanfattningsvis
Som vi har visat är det väldigt enkelt att installera ett ikontypsnittspaket i WordPress. Och inte bara det – det bidrar positivt till responsen på din webbplats och till laddningshastigheter, vilket gör dem till ett utmärkt val om du vänder dig till användare som kommer åt dina tjänster på mobiler eller med långsammare anslutning, men också bättre totalt sett när det gäller användarupplevelse. Lätt, lätt att styla och snabb att ladda: vad ska man inte gilla med det?
Stöd vårt arbete ❤️
Om du gillade den här artikeln, överväg att lämna dricks för att hjälpa oss fortsätta publicera bra innehåll.
