Människor dras naturligt till det visuella utseendet hos en webbplats av WordPress, lika mycket som de attraheras av det skrivna innehållet du delar. Faktum är att enligt Jeff Bullas ", Artiklar med bilder har 94% fler visningar än artiklar utan bilder.

Det är en enorm ökning av sidvisningar om du frågar mig.

Och vad är orsaken exakt?

Lägg bara till några högkvalitativa, artikelrelevanta bilder i hela ditt innehåll.

Men hur är det med bilderna på din webbplats som går utöver skärmdumpar och fotografier? Vad sägs om bilder som inte bara väcker uppmärksamhet, utan också har en användbar funktion?

Ja, jag pratar om ikoner. Du vet, de små bilderna som finns på webbplatser för att uppmuntra delning på sociala medier, för att illustrera kontaktsidor för företagare, för att nämna några av fallen användning.

Som idén togs från denna webbplats, den besökare inte bara attraherades av bilder på webbplatser utan var benägna att interagera med dem, började folk lägga till dem på sina webbplatser.

Men när tekniken går framåt har traditionella bildikoner som alltid börjat vackla som en bildlösning för webbplatser. Detta beror på att de gör sidorna mycket tyngre och därför långsammare, men framför allt var denna lösning inte alltid lämplig för mobiler.

Men det finns en lösning: ikonteckensnitt.

Idag ska jag berätta vad ikonfonter är och fördelarna med att använda dem på din WordPress-webbplats. Dessutom visar jag dig hur du lägger till ikonsteckensnitt till din WordPress-webbplats med det populära pluginet " Bättre Font Grymt ".

Så låt oss börja.

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

Ikonfonter är exakt vad de säger: typsnitt helt inbyggda i ikoner. I själva verket ikonfonter eller " make-ikonen "Kan beskrivas som ett teckensnitt som bara visar tecken eller symboler, inte bokstäver och siffror som traditionella teckensnitt och text är associerade med.

Ikonfonter används för att visa vanliga symboler på din webbplats. Till exempel är sociala medieknappar, din kundvagn, nedladdningsknappar och navigeringsknappar exempel på ikoner som visar små, interaktiva bilder på din webbplats.

Varför använda ikonsteckensnitt?

Bildikoner har fungerat bra tidigare för många webbplatsägare. Men i takt med att navigeringsregler, användbarhet och design har utvecklats har ikonteckensnitt blivit den bästa lösningen för att visa interaktiva bilder på en webbplats.

Här är en titt på några övertygande skäl till varför ikonfonter är det bästa valet:

• Utbyggbart enkelt utan att förlora kvaliteten
• Anpassningsbar när det gäller färg och nyans
• 100% responsiv
• Fungerar som CSS image sprites, men beter sig som text
• Användarvänlig
• kompatibla webbläsare
• Anpassa opacitet, rotation och mer
• Storlek mindre fil
• Offra inte hastighet eller prestanda på din webbplats

Som du kan se finns det flera anledningar till att du kanske vill använda ett ikonfont på din webbplats i motsats till en bildikon.

Installera teckensnittsikoner på din webbplats med hjälp av ett plugin

Better Font Awesome är en Wordpress plugin gratisprogram som låter dig automatiskt integrera den senaste versionen av Font Awesome i ditt WordPress-projekt. Dessutom kommer den med CSS, kortkoder och TinyMCE kortkodsgenerator.

Detta plugin har en mängd användbara funktioner för webbplatsägare:

• Rutinuppdatering av den senaste versionen
• Möjlighet att växla mellan versioner av Font Awesome utan att ändra korta koder
• Stöd för andra populära typsnitt för teckensnitt inklusive deras kortkoder
• Utgivet av jsDelivr CDN

1 Steg: Installera och aktivera bättre teckensnitt Awesome

För att komma igång, installera och aktivera plugin "Better Font Awesome" via din WordPress-instrumentpanel precis som med något annat plugin.

Navigera först till " Plugins> Lägg till nya Och sök efter " Bättre Font Grymt ".

Välj sedan " installera nu »Och klicka på« aktivera ".

När den har aktiverats lägger plugin till en länkBättre Font GrymtUnder inställningsmenyn på din WordPress-instrumentpanelen.

Steg 2: Konfigurera insticksinställningar

Så här konfigurerar du plugin « Bättre Font Grymt ", Börja med att klicka på menyalternativet" Bättre Font Grymt Under Inställningar. När du gör det kommer du att se en skärm som liknar den här:

Här kan du göra följande:

• version: Välj den version av “Better Font Awesome” som du vill använda.
• Använd Minified CSS: Markera den här rutan om du vill använda den minifierade versionen av CSS.
• Ta bort det befintliga utskriftssnittet: markera den här rutan för att försöka ta bort kodade utdrag och kortkoder som läggs till av andra plugins och teman.
• Dölj administratörsrecensioner: Dölj standardadministrationsvarningarna som visas när API- och CDN-fel uppstår.

Förutom minimimängden Better Font Awesome-alternativ finns det ett litet avsnitt "Användning" som förklarar hur du lägger till ikoner på din webbplats.

Steg 3: Lägga till ikoner på din webbplats

Det finns tre enkla sätt att lägga till ikoner på din webbplats med "Better Font Awesome" - via kortkod, HTML eller TinyMCE.

# 1. Lägga till ikoner med kortkod

För att lägga till ikoner på din webbplats med hjälp av en kortkod, besök först " Font Toppen För att se en komplett lista över tillgängliga ikoner som kan användas.

Här kan du söka efter den ikon du vill ha. Om du till exempel vill ha en "e-post" -ikon, letar du bara efter det nyckelordet och väljer ikonen du vill använda genom att klicka på den.

När du har klickat på ikonen du vill lägga till ser du en skärm som visar bilden av ikonen med dess olika storlekar och ett litet kodblock:

Kopiera bara kodblocket och klistra in det var som helst på din webbplats med fliken "Textredigerare". Så här ser redaktören ut på din webbplats:

I slutändan, här är vad besökare kommer att se när de kommer åt din webbplats:

# 2. Lägga till ikoner med HTML-kod

Som vi såg i avsnittet " Utnyttjande Du har möjlighet att använda HTML-kod för att infoga ikoner på din webbplats. Pluginutvecklare tar dock hänsyn till att användning av HTML kräver versionsspecifika prefix.

Det är därför de rekommenderar att du använder kortkoder istället. Men om du vill använda HTML-kod har Font Awesome det användbar information här.

# 3. Lägga till ikoner med TinyMCE

Detta är förmodligen det enklaste sättet att lägga till ikoner på din webbplats. I "Visual Editor" -läget klickar du bara på ikonen Infoga. Därifrån, bläddra igenom tillgängliga ikonalternativ eller begränsa dina resultat med sökfunktionen.

När du väl har hittat ikonen klickar du bara på den. Kortkodgeneratorn matar automatiskt in den information som krävs i ditt inlägg eller sida.

Om du vill lära dig att anpassa ikonerna på din webbplats hänvisar du till exemplen på " Font Toppen ".