Hur man enkelt lägger till ikonfonter i ditt WordPress-tema

När vi tittar på WordPress-webbplatser som använder vanliga bildfiler för sina ikoner, kan vi inte låta bli att tänka att de missar något bättre.

Det beror på att ikonfonter är det smartare valet – de laddas snabbare, ser skarpare ut på alla skärmar, och du kan enkelt ändra deras storlek eller färg med bara några få klick.

Många webbplatsägare använder fortfarande gammaldags bildikoner eftersom de inte har hört talas om de enklare alternativen som finns. Tack vare moderna ikonfonter kan du nu lägga till snygga ikoner på din webbplats utan att sakta ner den.

I den här guiden visar vi dig de enklaste sätten att lägga till ikonfonter i ditt WordPress-tema. Vi har testat dessa metoder själva, och de fungerar utmärkt med vilket tema du än använder.

Vad är ikonfonter och varför du bör använda dem?

Ikonfonter innehåller symboler eller små bilder istället för bokstäver och siffror.

Du kan använda dessa ikonfonter på många olika sätt. Du kan till exempel använda dem med din kundvagn, nedladdningsknappar, funktionsrutor, utlottningstävlingar och till och med WordPress-navigeringsmenyer.

Faktum är att WordPress använder typsnittsikoner i sitt administrationsområde.

De flesta besökare kommer omedelbart att förstå vad en vanlig ikon betyder, så de kan göra din webbplats enklare att navigera. De kan också hjälpa dig att skapa en flerspråkig webbplats eftersom de flesta människor kommer att förstå vanliga ikonfonter oavsett vilket språk de talar.

Jämfört med bildbaserade ikoner laddas typsnittsikoner mycket snabbare så de kan öka WordPress hastighet och prestanda.

Det finns flera open source-ikonfontuppsättningar som du kan använda gratis, men i den här guiden kommer vi att använda Font Awesome eftersom det är den mest populära open source-ikonuppsättningen.

Med det sagt, låt oss titta på hur du enkelt kan lägga till ikonfonter till ditt WordPress-tema. Använd helt enkelt snabblänkarna för att hoppa direkt till den metod du vill använda:

• Metod 1. Lägga till ikonfonter med ett WordPress-plugin (gratis och enkelt)
• Method 2. Using Icon Fonts with SeedProd (More Customizable)

Metod 1. Lägga till ikonfonter med ett WordPress-plugin (gratis och enkelt)

Det enklaste sättet att lägga till anpassade ikonfonter i WordPress är att använda pluginet Font Awesome.

Detta plugin låter dig använda gratis ikonfonter på dina sidor och inlägg utan att ändra dina WordPress-temafiler. Du får också automatiskt alla nya Font Awesome-ikoner varje gång du uppdaterar pluginet.

Det första du behöver göra är att lägga till Font Awesome i WordPress. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du lägga till en Font Awesome-ikon i valfritt kortkodblock. Öppna helt enkelt sidan eller inlägget där du vill visa teckensnittikonen och klicka sedan på ‘+’-ikonen.

Du kan nu söka efter 'Shortcode' och välja rätt block när det dyker upp.

När det är gjort kan du lägga till vilken Font Awesome-ikon som helst med följande kortkod:

[icon name="rocket"]

Ersätt helt enkelt "rocket" med namnet på ikonen du vill visa. För att få namnet, gå till Font Awesome-biblioteket och klicka på ikonen du vill använda.

I popup-fönstret som visas, klicka på ikonen.

Font Awesome kommer nu att kopiera namnet till ditt urklipp automatiskt.

När det är gjort, klistra helt enkelt in namnet i kortkoden. Du kan nu klicka på ‘Publicera’ eller ‘Uppdatera’ för att göra ikonfonten live.

Ibland vill du kanske visa en ikonfont inuti ett textblock. Du kan till exempel behöva visa en 'copyright'-symbol efter ett varumärkesnamn.

För att göra detta, klistra helt enkelt in kortkoden i valfritt stycke-block.

Du kan sedan använda inställningarna i menyn till höger för att anpassa ikonen, liknande hur du anpassar alternativ för textblock. Du kan till exempel ändra textfärgen, teckenstorleken och bakgrundsfärgen i WordPress.

WordPress kommer att omvandla kortkoden till en Font Awesome-ikon och visa den tillsammans med din text.

Ett annat alternativ är att lägga till kortkoden i ett widget-redo område.

Du kan till exempel lägga till ett kortkodblock i din webbplats sidofält eller liknande sektion.

För mer information, se vår guide om hur man använder kortkoder i dina WordPress-sidofältswidgetar.

Du kan till och med lägga till ikonens kortkod i kolumner och skapa vackra funktionsrutor.

För detaljerade instruktioner, se vår guide om hur man lägger till funktionsrutor med ikoner i WordPress.

Många webbplatser använder ikonfonter i sina menyer för att hjälpa besökare att hitta rätt. För att lägga till en ikon, skapa antingen en ny meny eller öppna en befintlig meny i WordPress-instrumentpanelen.

För steg-för-steg-instruktioner, kolla in vår nybörjarguide om hur man lägger till en navigeringsmeny i WordPress.

På sidan Utseende » Menyer , klicka på ‘Skärmalternativ’ och markera sedan rutan bredvid ‘CSS-klasser’.

När det är gjort, klicka helt enkelt för att expandera menyalternativet där du vill visa ikonen.

Du bör nu se ett nytt fält 'CSS Classes'.

För att få en ikons CSS-klass, hitta helt enkelt ikonfonten på Font Awesome-webbplatsen och klicka på den. Om du vill kan du sedan ändra ikonens stil genom att klicka på de olika inställningarna.

I popup-fönstret ser du ett HTML-kodavsnitt. CSS-klassen är helt enkelt texten mellan citattecknen. Till exempel, i följande bild är CSS-klassen fa-solid fa-address-book.

Kopiera bara texten inom citattecknen och byt sedan tillbaka till WordPress-instrumentpanelen.

Du kan nu klistra in texten i fältet 'CSS-klasser'.

För att lägga till fler ikonfonter, följ helt enkelt samma process som beskrivs ovan.

När du är nöjd med hur menyn är inställd, klicka på ‘Spara.’ Nu, om du besöker din WordPress-webbplats, kommer du att se den uppdaterade navigeringsmenyn.

Metod 2. Använda ikon-typsnitt med SeedProd (mer anpassningsbart)

Om du vill ha friheten att använda fontikoner var som helst på din webbplats, rekommenderar vi att du använder ett sidbyggarplugin.

SeedProd är den bästa dra-och-släpp WordPress-sidbyggaren på marknaden och har över 1400 Font Awesome-ikoner inbyggda. Den har också ett färdigt ikonblock som du kan lägga till på vilken sida som helst med dra-och-släpp.

Flera av våra partner varumärken har skapat hela sina webbplatser med den, och de har haft fantastiska upplevelser. För detaljer, se vår SeedProd-recension.

Det första du behöver göra är att installera och aktivera pluginet. För mer information, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till SeedProd » Inställningar och ange din licensnyckel.

Du hittar denna information i ditt konto på SeedProd-webbplatsen. Efter att ha angett licensnyckeln, klicka på knappen 'Verifiera nyckel'.

Därefter behöver du besöka SeedProd » Sidor och klicka på knappen 'Lägg till ny landningssida'.

Nu kan du välja en mall att använda som grund för din sida. SeedProd har över 350+ professionellt designade mallar som du kan anpassa efter din WordPress-bloggs eller webbplats behov.

Till exempel kan du skapa en viral väntelista-landningssida, en squeeze-sida eller till och med en anpassad 404-felsida för att hålla användarna engagerade.

För att välja en mall, för muspekaren över den och klicka sedan på 'Bock'-ikonen.

Vi använder mallen ‘Ebook Sales Page’ i alla våra bilder, eftersom den är perfekt för att sälja digitala produkter. Du kan dock använda vilken design du vill.

Ange sedan ett namn för den anpassade sidan. SeedProd skapar automatiskt en URL baserad på sidans titel, men du kan ändra denna URL till vad du vill.

När du är nöjd med informationen du har angett, klicka på knappen 'Spara och börja redigera sidan'.

Därefter kommer du till SeedProds dra-och-släpp-sidbyggare, där du kan anpassa mallen.

SeedProd-redigeraren visar en liveförhandsgranskning av din design till höger och vissa blockinställningar till vänster.

Menyn till vänster har också block som du kan dra till din design.

Du kan dra och släppa standardblock som knappar och bilder eller använda avancerade block som kontaktformuläret, nedräkning, delningsknappar för sociala medier och mer.

För att anpassa ett block, klicka helt enkelt för att välja det i din layout.

Menyn till vänster visar nu alla inställningar du kan använda för att anpassa det blocket. Du kan till exempel ofta ändra bakgrundsfärger, lägga till bakgrundsbilder eller ändra färgskema och typsnitt för att bättre matcha ditt varumärke.

För att lägga till ett ikon-typsnitt på sidan, hitta helt enkelt blocket 'Icon' i kolumnen till vänster och dra det sedan till din layout.

SeedProd kommer att visa en 'pil'-ikon som standard.

För att visa en annan Font Awesome-ikon istället, klicka bara för att välja ikonblocket.

I menyn till vänster, för muspekaren över ikonen och klicka sedan på knappen 'Ikonbibliotek' när den visas.

Du kommer nu att se alla olika Font Awesome-ikoner som du kan välja mellan.

Hitta helt enkelt den teckensnittikon du vill använda och klicka på den.

SeedProd kommer nu att lägga till ikonen i din layout.

Efter att ha valt en ikon kan du ändra dess justering, färg och storlek med hjälp av inställningarna i menyn till vänster.

Du kan också lägga till en länk till font-ikonen genom att skriva i fältet 'Länk' i menyn till vänster.

Ett annat alternativ är att använda SeedProds färdiga ikonruta.

Detta gör att du kan skriva lite text och sedan visa en ikonfont bredvid den, vilket gör det till ett utmärkt val för funktionsrutor.

Hitta helt enkelt ikonrutan i menyn till vänster och dra den till din layout.

Du kan sedan klicka för att välja blocket och ändra ikonen genom att följa samma process som beskrivs ovan.

Därefter kan du skriva in rubrik- och brödtexten.

Du kan också ändra blockets utfyllnad och marginal, lägga till CSS-animationer och mer genom att välja fliken 'Avancerat'.

Du kan fortsätta arbeta på sidan genom att lägga till fler block och anpassa dessa block i menyn till vänster.

När du är nöjd med hur sidan ser ut, klicka på 'Spara'-knappen. Du kan sedan välja 'Publicera' för att göra sidan live.

Alternativ: Använd SVG-ikoner

Ett annat sätt att lägga till ikonbilder i WordPress är att använda SVG-ikoner. Kort för skalbart vektorformat, det är ett vanligt använt bildformat för vektorgrafik.

Många använder SVG-vektorikoner istället för ikonfonter när de vill lägga till flera färger i sina ikoner. Dessa filer är också kända för att vara mer SEO-vänliga och kräver färre serverförfrågningar för att laddas än andra bildikoner.

Om du vill lära dig mer om SVG kan du kolla in vår steg-för-steg-guide om hur man lägger till SVG-bildfiler i WordPress.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till ikonfonter i ditt WordPress-tema. Du kan också gå igenom vår guide om de bästa WordPress-temabyggarna och hur du ändrar teckensnitt i ditt WordPress-tema.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.