Hur man använder ikonfonter i WordPress inläggsredigerare (ingen kod)

Vill du använda ikonfonter i WordPress-inläggsredigeraren?

Ikonfonter gör att du enkelt kan använda bilder och symboler i text. De är lätta och kommer inte att sakta ner din webbplats, och de kan enkelt skalas till valfri storlek och stylas som vilken annan textfont som helst.

I den här artikeln visar vi dig hur du enkelt använder ikonfonter i WordPress-inläggredigeraren utan att skriva någon HTML-kod.

Vi visar dig flera metoder, var och en med ett något annorlunda tillvägagångssätt än den andra. Du kan välja en som fungerar bäst för dig.

Metod 1. Lägga till ikonfonter i WordPress-inläggredigeraren med JVM Rich Text Icons

Denna metod rekommenderas att användas på alla typer av WordPress-webbplatser. Den är lätt att använda och fungerar sömlöst med blockredigeraren.

Först måste du installera och aktivera pluginet JVM Rich Text Icons. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du helt enkelt redigera ett WordPress-inlägg eller en sida eller skapa ett nytt. Inne i inläggredigeraren, lägg till ett nytt styckesblock, och du kommer att se en ny flaggikon i verktygsfältet för blocket.

Att klicka på den visar ett popup-fönster med ikoner att välja mellan. Som standard används de populära Font Awesome-ikonfonten.

Du kan använda sökningen för att leta efter en ikon eller helt enkelt skrolla ner för att hitta ikonen du vill ha och sedan klicka för att lägga till den.

En fördel med att använda ikonfonter är att du kan använda CSS för att styla dem.

Men eftersom du redan använder blockredigeraren kan du helt enkelt använda de inbyggda färgverktygen för att styla ikonerna.

Pluginet låter dig använda ikonfonter i de flesta textblock som Stycke, Lista, Knapp, Kolumner, Omslag och mer.

Här är ett exempel på hur man använder ikonfonter och blockalternativ för att styla tre kolumner.

Ett annat användbart exempel på att använda ikonfonter är med knappar.

Den här gången använder vi inbäddade ikonfonter tillsammans med lite text för de två knapparna.

Använd gärna verktygen i blockredigeraren som textjustering, färger, avstånd och mer för att få ut det mesta av ikonfonterna.

Metod 2. Lägg till ikon-teckensnitt i WordPress-inläggredigeraren med Font Awesome

Den här metoden kräver att du lägger till kortkoder i inläggsredigeraren för att visa ikonfonter. Du kan använda den här metoden om du inte behöver använda ikonfonter regelbundet i dina WordPress-inlägg och sidor.

Först måste du installera och aktivera pluginet Font Awesome. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Vid aktivering kan du redigera ett inlägg eller en sida i WordPress och använda följande kortkod för att lägga till en fontikon.

[icon name="home"]

Parametern 'name' här är namnet på teckensnittet som används av Font Awesome. Du hittar hela listan på sidan Font Awesome-översikt.

När den har lagts till kan du förhandsgranska ditt inlägg eller din sida för att se hur ikonen kommer att se ut på den aktiva webbplatsen eftersom den inte kommer att visas som en ikon i blockredigeraren.

Så här såg det ut på vår testsida.

Du kan använda kortkoden inuti ett stycke och inline med annan text. Du kan också lägga till den på egen hand med hjälp av blocket 'Kortkod'.

Att använda blocket 'Kortkod' ger dig dock inte de stilalternativ du får med andra textblock.

Du kan också lägga till kortkoden inuti kolumner för att skapa en funktionrad.

Det skulle vara lite knepigare eftersom du inte kommer att kunna se de faktiska bilderna, och kolumnhöjderna kommer att fortsätta att ändras i redigeraren.

Så här såg det ut på vår testwebbplats. Kolumnerna har samma höjd, även om de inte har det i redigeraren.

Du kommer förmodligen att behöva förhandsgranska ditt arbete i en ny webbläsarflik många gånger för att se hur det kommer att se ut för användarna.

Metod 3. Använda ikonfonter med WordPress sidbyggare

Den här metoden är utmärkt om du skapar en landningssida eller designar din webbplats med en WordPress-sidbyggare som SeedProd.

SeedProd är den bästa WordPress-sidbyggaren på marknaden. Den låter dig enkelt skapa fantastiska landningssidor eller designa ett komplett webbplatstema.

Först måste du installera och aktivera SeedProd-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Vid aktivering kommer du att bli ombedd att ange din plugin-licensnyckel. Du hittar denna information under ditt konto på SeedProd-webbplatsen.

Efter att ha angett din licensnyckel och klickat på 'Verifiera nyckel' kan du börja arbeta med din landningssida.

Gå helt enkelt till sidan SeedProd » Landningssidor och klicka på knappen 'Lägg till ny landningssida'.

Därefter kommer du att bli ombedd att välja en mall för din landningssida.

SeedProd levereras med en mängd vackra landningssidemallar som du kan använda som utgångspunkt, eller så kan du börja med en tom mall och designa allt själv.

För den här handledningen kommer vi att använda en fördesignad mall. Klicka helt enkelt på en mall för att välja den och fortsätta.

Ange sedan en rubrik för din landningssida och välj en URL.

Efter att ha angett dem, klicka på knappen ‘Spara och börja redigera sidan’ för att fortsätta.

SeedProd kommer nu att starta gränssnittet för sidbyggaren. Det är ett dra-och-släpp-designverktyg där du helt enkelt kan peka och klicka på vilket objekt som helst för att redigera det.

Du kan också dra och släppa block från den vänstra kolumnen för att lägga till nya element i din design.

För den här handledningens skull kommer vi att lägga till ikonblocket.

När du har lagt till blocket kan du helt enkelt klicka för att redigera dess egenskaper.

Den vänstra kolumnen kommer att ändras för att visa alternativen för ikonblocket. Du kan klicka i sektionen ‘Ikon’ till vänster och välja en annan ikonbild eller ändra färg och stil.

Ett annat sätt att använda ikoner i SeedProd är genom att lägga till blocket ‘Ikonruta’.

Skillnaden mellan detta och blocket 'Ikon' som vi använde tidigare är att 'Ikonruta' låter dig lägga till text tillsammans med din valda ikon.

Detta är ett av de vanligaste sätten att använda ikoner när man visar produkt funktioner, tjänster och andra objekt.

Du kan placera din ikonruta inuti kolumner, välja färger och justera ikonstorleken efter eget tycke.

Dessutom kan du även formatera den medföljande texten med hjälp av SeedProds formateringsverktygsfält.

När du är klar med att redigera din sida, glöm inte att klicka på knappen 'Spara' längst upp till höger på skärmen.

Om du är redo kan du klicka på ‘Publicera’ för att sidan ska bli live, eller så kan du klicka på ‘Förhandsgranska’ för att säkerställa att den ser ut som du vill.

Du kan också klicka på 'Spara som mall' så att du kan återanvända den här designen med SeedProd på andra delar av din webbplats.

Här är hur ikonfonterna såg ut på vår testwebbplats.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du använder ikonfonter i WordPress inläggredigerare utan att skriva HTML-kod. Du kanske också vill se vår guide till WordPress prestanda för att optimera din webbplatshastighet eller de bästa landningssid plugins för WordPress.

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.