Så här lägger du enkelt till Icon Fonts i ditt WordPress Theme

Vill du add to icon fonts till din WordPress-webbplats?

Icon fonts kan resizes och hämtar data precis som webbtypsnitt, så de kommer inte att sakta ner din website. Du kan till och med styla dem med CSS för att få exakt det utseende du vill ha.

I den här artikeln visar vi dig hur du enkelt kan add to icon fonts i your WordPress theme.

Vad är Icon Fonts och varför ska du använda dem?

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

Du kan använda dessa fonts med icons på många olika sätt. Du kan till exempel använda dem med din shopping cart, knappar för download, utvalda boxar, giveaway-tävlingar och till och med menyer för navigation i WordPress.

Faktum är att WordPress använder font icons i sitt admin area.

De flesta besökare kommer omedelbart att förstå vad en vanligt förekommande icon betyder, så de kan göra din webbplatsikon lättare att navigera. De kan också hjälpa you att skapa en flerspråkig website eftersom de flesta människor förstår vanliga font med icons oavsett vilket språk de talar.

Jämfört med imagebaserade icons hämtar font icons mycket snabbare, så de kan öka WordPress hastighet och prestanda.

Det finns flera open source icon font-set som du kan använda gratis, men i den här guiden använder vi Font Awesome eftersom det är det mest populära open source icon-setet.

Med det sagt, låt oss titta på hur du enkelt kan add to icon fonts i your WordPress theme. Använd bara snabblänkarna för att hoppa direkt till den metod som du vill använda:

Metod 1. Lägga till Icon Fonts med hjälp av ett WordPress tillägg (Lätt)

Det enklaste sättet att add to custom icon fonts till WordPress är genom att använda Font Awesome plugin.

Detta plugin allow you to use gratis icon fonts in your pages and posts without modifying your WordPress theme files. Du kommer också att få alla nya Font Awesome icons automatiskt varje gång du update pluginet.

Det första du behöver göra är att add to Font Awesome till WordPress. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Efter aktivering kan du add a Font Awesome icon to any shortcode block. Öppna bara den page eller det post där du vill visa icon fonten och klicka sedan på ”+”-ikonen.

Du kan nu searcha efter ”Shortcode” och välja rätt block när det dyker upp.

När det är gjort kan du add to vilken Font Awesome icon som helst med hjälp av följande shortcode:

[icon name="rocket"]

Ersätt bara ”rocket” med namnet på den icon som du vill visa. För att få namnet, heada till Font Awesome-biblioteket och click på den icon som du vill använda.

I popupen som visas går du vidare och klickar på icons namn.

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

När det är gjort klistrar du helt enkelt in namnet i shortcoden. Du kan nu klicka på ”Publicera” eller ”Update” för att göra icon fonten live.

Ibland kanske du vill visa en icon font inuti ett block med text. Du kan t.ex. behöva displayed en ”copyright”-symbol efter ett varumärkesnamn.

För att göra detta klistrar du helt enkelt in shortcoden i ett Paragraph block.

Du kan sedan använda inställningarna i den högra menyn för att customize ikonen, på samma sätt som du customize alternativ för text block. Du kan t.ex. ändra storlek på font och bakgrundsfärg i WordPress.

WordPress förvandlar shortcoden till en Font Awesome icon och visar den tillsammans med din text.

Ett annat alternativ är att add shortcoden till ett widgetfärdigt area.

Till exempel kan du add to ett Shortcode block till din sites sidebar eller liknande section.

Mer information finns i vår guide om hur du använder shortcodes i dina widgetar i sidebar WordPress.

Du kan till och med add the icon shortcode to columns och skapa beautiful feature boxes.

Detaljerade instruktioner finns i vår guide om hur du lägger till utvalda funktioner i form av boxes med icons i WordPress.

Många websites använder fonten icon i sina menyer för att hjälpa besökarna att hitta rätt. För att add to en icon skapar du antingen en new menu eller öppnar en befintlig menu i WordPress dashboard.

För steg-för-steg-instruktioner, kontrollera vår guide för nybörjare om hur du lägger till en navigation menu i WordPress.

På sidan Appearance ” Menus , click on ’Screen Options’ and then check the box next to ’CSS Classes’.

När du har gjort det klickar du bara på för att förstora det menu item där du vill visa ikonen.

You should now see a new ’CSS Classes’ field.

För att få en icons CSS-klass letar du bara reda på iconens font på Font Awesomes website och klickar på den. Om du vill kan du ändra stilen på ikonen genom att clicka på de olika inställningarna.

I popupen ser du ett HTML code snippet. CSS-klassen är helt enkelt texten mellan citattecknen. Till exempel, i följande image är CSS-klassen fa-solid fa-address-book.

Kopiera bara texten inom citaten och växla sedan tillbaka till WordPress dashboard.

Nu kan du klistra in texten i fältet ”CSS Classes”.

För att add to fler icon fonts, följ bara samma process som beskrivs ovan.

När du är nöjd med hur menyn är uppbyggd klickar du på ”Save”. Om du nu besöker din WordPress website kommer du att se den uppdaterade navigation menu.

Metod 2. Använda Icon Fonts med SeedProd (mer anpassningsbar)

Om du vill ha friheten att använda font icons var som helst på din site, rekommenderar vi att du använder ett page builder plugin.

SeedProd är den bästa drag-and-drop WordPress page builder på marknaden och har över 1400 Font Awesome icons built-in. Den har också ett färdigt Icon block som du kan add to vilken page som helst med drag and drop.

Med SeedProd kan du också skapa ett custom WordPress theme som passar din önskade website design.

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

Efter aktivering, gå till SeedProd ” Settings och enter din license key.

You can find this information in your account on the SeedProd website. När du har enter license key, gå vidare och klicka på knappen ”Verify Key”.

Därefter måste du besöka SeedProd ” Pages och klicka på knappen ’Add New Landing Page’.

Nu kan du välja en template som du vill använda som grund för din page. SeedProd har över 300+ professionellt utformade templates som du kan customize efter din WordPress blogg eller website’s behov.

För att välja en template, hovera musen över den och klicka sedan på ikonen ”Checkmark”.

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

Gå sedan vidare och skriv in ett namn för den customize page. SeedProd kommer automatiskt att skapa en URL baserat på sidans Rubrik, men du kan ändra denna URL till vad du vill.

När du är nöjd med den information du har enter klickar du på knappen ”Save and Start Editing the Page”.

Därefter kommer du att tas till SeedProd drag and drop page builder, där du kan customize templaten.

SeedProd editor visar en live preview av din design till höger och några block editor inställningar till vänster.

I menyn till vänster finns också block som du kan dra över till din design.

Du kan dra and drop standardblock som knappar och images eller använda avancerade block som kontaktformulär, nedräkning, delningsknappar för social media med mera.

För att customize ett block klickar du bara för att välja det i din layout.

Den vänstra menyn visar nu alla de Settings som du kan använda för att customize det blocket. Till exempel kan du ofta ändra bakgrundsfärger, add bakgrundsbilder eller ändra färgschema och font för att bättre matcha ditt varumärke.

För att add to en icon font till sidan, hitta blocket ”Icon” i den vänstra colonnen och dra den sedan till din layout.

SeedProd kommer att visa en ”pil” icon som standard.

Om du vill visa en annan Font Awesome icon istället klickar du bara för att select the Icon block.

I menyn till vänster hoverar du med musen över ikonen och klickar sedan på knappen ”Icon Library” när den visas.

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

Hitta bara den font icon som du vill använda och ge den ett click.

SeedProd kommer nu att add’a iconen till din layout.

När du har valt en icon kan du ändra dess inriktning, färg och storlek med hjälp av inställningarna i menyn till vänster.

You can also add a link to the font icon, by typing into the ’Link’ field in the left-hand menu.

Ett annat alternativ är att använda SeedProd’s färdiga Icon Box.

This allows you to type in some text and then show a font icon next to it, which makes it a great choice for feature boxes.

Leta bara upp Icon Box i menyn till vänster och dra den till din layout.

Du kan sedan clicka för att selecta blocket och ändra iconen genom att följa samma process som beskrivs ovan.

Efter det kan du skriva in rubriker och brödtext.

Du kan också ändra blockets avstånd och textfärg, add to CSS-animationer och mycket mer genom att välja tabben ”Advanced”.

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

När du är nöjd med hur page ser ut klickar du på knappen ”Save”. You can then select ’Publicera’ to make that page live.

Alternativ: Använd SVG-icons

Ett annat sätt att add to icon images till WordPress är att använda SVG-ikoner. Det är en förkortning av scalable vector format och är ett vanligt format för images för vektorgrafik.

Många använder SVG-vektorikoner över icon fonts när de vill add to flera färger till sina icons. Dessa filer är också kända för att vara mer sökmotorsoptimerande och kräver färre requests från servern att ladda än andra image-ikoner.

Om du vill lära dig mer om SVG kan du kontrollera vår Step-by-Step guide om hur du lägger till SVG-bildfiler i WordPress.

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du addar icon fonts i ditt WordPress theme. You can also go through our guide on the best popup plugins compared and how to choose the best web design software.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.