Hur man använder Icon Fonts i WordPress Post Editor (Ingen kod)

Vill du använda icon fonts i WordPress post editor?

Imagely fonts allow you to easily use images and symbols in text. De är lätta och kommer inte att sakta ner din site, och de kan enkelt skalas till valfri storlek och gillar alla andra texttypsnitt.

I den här artikeln visar vi dig hur du enkelt kan använda icon fonts i WordPress post editor utan att skriva någon HTML-kod.

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

Metod 1. Lägga till Icon Fonts i WordPress Post Editor med hjälp av JVM Rich Text Icons

Den här metoden rekommenderas för alla typer av websites i WordPress. Den är användarvänlig och fungerar sömlöst med Block Editor.

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

Efter aktivering kan du helt enkelt editera ett WordPress post eller page eller skapa en new. Inuti post editor, add a new paragraph block, och du kommer att se en new Flag icon i block toolbar.

Om du klickar på den visas en popup med icons att välja mellan. Den använder de populära Font Awesome icon-teckensnitten som standard.

Du kan använda search för att leta efter en icon eller helt enkelt rulla ner för att hitta den icon du vill ha och sedan clicka för att add to den.

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

Men eftersom du redan använder block editor kan du helt enkelt använda de built-in färgverktygen för att styla icons.

Pluginet allow you to use icon fonts in most text blocks such as Paragraph, List, Button, Columns, Cover, and more.

Här är ett exempel på hur du använder icon fonts och block alternativ för att styla tre Column.

Ett annat användbart exempel på användning av icons font är knappar.

Den här gången använder vi inline icon fonts tillsammans med lite text för de två knapparna.

Använd gärna verktygen i Block Editor som gillar textjustering, färger, avstånd och mer för att få ut det mesta av icon fonts.

Metod 2. Add to Font Awesome i WordPress Post Editor med Font Awesome

Den här metoden kräver att du addar shortcodes i post editor för att visa icon fonts. Du kan använda den här metoden om du inte regelbundet behöver använda icon fonts i dina WordPress posts och pages.

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

Efter aktivering kan du edit ett post eller page i WordPress och använda följande shortcode för att add to en font icon.

[icon name="home"]

Parametern name här är namnet på det font som används av Font Awesome. Du kan hitta hela listan på Font Awesome cheatsheet page.

När du har lagt till kan du förhandsgranska ditt inlägg eller din page för att se hur ikonen kommer att se ut på live-webbplatsen eftersom den inte kommer att visas som en icon i block editor.

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

Du kan använda shortcoden i ett stycke och i linje med annan text. Du kan också lägga till den på egen hand med hjälp av blocket ”Shortcode”.

Men om du använder blocket ”Shortcode” får du inte de alternativ för styling som du får med andra textblock.

You can also add the shortcode inside columns to create a features row.

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

Så här såg det ut på vår test website. Columnerna har samma höjd, trots att de inte finns i Editorn.

Du kommer förmodligen att behöva previewa ditt arbete i en new tabs i webbläsaren många gånger för att se hur det kommer att se ut för användarna.

Metod 3. Använda Icon Fonts med WordPress Page Builders

Den här metoden är bra om du skapar en landing page eller designar din website med hjälp av en WordPress page builder som SeedProd.

SeedProd är den bästa WordPress page builder på marknaden. Det allow you att enkelt skapa fantastiska landing pages eller designa ett komplett website theme.

Först måste du installera och aktivera SeedProd plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Vid aktivering kommer du att bli ombedd att enter din plugin license key. Du hittar den här informationen under your account på SeedProd website.

När du har enter din license key och clickat på ”Verify Key” kan du börja arbeta med din landing page.

Gå bara till SeedProd ” Landing Pages sida och klicka på knappen ’Add New Landing Page’.

Efter det kommer du att bli ombedd att välja en template för din landing page.

SeedProd kommer med ett gäng beautiful landing page designs som du kan använda som utgångspunkt, eller så kan du börja med en tom template och designa det hela själv.

För denna tutorial kommer vi att använda en fördesignad template. Klicka bara på en template för att välja den och fortsätt.

Därefter kommer du att bli ombedd att ange en rubrik för din landing page och välja en URL.

När du har enterat dem klickar du på knappen ”Save and Start Editing the Page” för att fortsätta.

SeedProd kommer nu att starta gränssnittet page builder. Det är ett drag and drop-designverktyg där du helt enkelt kan peka och clicka på ett objekt för att editera det.

Du kan också dra and drop block från den vänstra Column för att add new element till din design.

I den här tutorialen ska vi add to blocket Icon.

När du har addat blocket kan du enkelt clicka för att editera dess egenskaper.

Den vänstra colonnen kommer att ändras för att visa alternativen för Icon blocket. You can click into the ’Icon’ section to the left and choose a different icon image or change the color and style.

Ett annat sätt att använda icons i SeedProd är genom att lägga till blocket ”Icon Box”.

Skillnaden mellan detta och blocket ”Icon” som vi använde tidigare är att ”Icon Box” allow you to add text tillsammans med din valda icon.

Detta är ett av de vanligaste sätten att använda icons för att displayed produktfunktioner, tjänster och andra objekt.

Du kan placera din icon box inuti columns, välja färger och justera storleken på iconen så som du gillar.

Dessutom kan du också formatera den medföljande texten med hjälp av SeedProds toolbar för formatering.

När du har slutfört edit av din page, glöm inte att click på knappen ”Save” högst upp till höger på vyn.

Om du är redo kan du klicka på ”Publicera” för att sidan ska gå live, eller så kan du klicka på ”Preview” för att se till att den ser ut som du vill.

Du kan också clicka på ’Save as Template’ så att du kan återanvända denna design med SeedProd på andra delar av din website.

Så här såg fonten med icons ut på vår test website.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du använder icon fonts i WordPress post editor utan att skriva HTML-kod. Du kanske också vill se vår WordPress prestanda guide för att optimera din webbplats hastighet eller de bästa landning page tillägg för WordPress.

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.