Så enkelt lägger du till ikonfonter i ditt WordPress-tema

Vill du lägga till ikonfonter på din WordPress-webbplats? Nyligen frågade en av våra användare vad som är det enklaste sättet att lägga till ikonfonter i deras WordPress-tema? Ikon typsnitt de tillåter dig att lägga till vektor ikoner utan att sakta ner din webbplats. I den här artikeln visar vi hur du enkelt lägger till ikonfonter i ditt WordPress-tema.

Vad är ikon typsnitt och varför du borde använda dem?

Ikonfonter innehåller symboler eller piktogram istället för bokstäver och siffror. Dessa piktogram kan enkelt omvandlas med hjälp av CSS utan att avsevärt öka din sidans nedladdningsstorlek.

Ikonfonter kan användas för att visa vanliga symboler. På en vanlig webbplats kan du använda dem för din kundvagn, nedladdningsknappar, funktionslådor, reglage, sociala medier knappar och även i WordPress navigationsmenyer.

Det finns flera fria och öppna ikonfonter tillgängliga med hundratals ikoner. Faktum är att varje WordPress-installering levereras med den fria dashicons-ikonens teckensnitt. Dessa ikoner används i WordPress adminverktygsfältet inne i adminområdet.

Några andra populära ikon typsnitt är:

• Typsnitt Awesome
• Genericons
• IcoMoon
• Linearicons

För denna tutorials skull kommer vi att använda FontAwesome. Det är den mest populära, fritt och öppen källikonfonten tillgängligt, och vi använder det också på vår OptinMonster-byggare.

Vi kommer att täcka två sätt att lägga till ikonfonter i WordPress. Den första metoden kommer att använda ett plugin, och den andra visar dig hur man lägger till ett ikonfont utan ett plugin.

Lägga till ikonfonter i WordPress Använda Plugins

FontAwesome och andra fria ikon typsnitt stöds av många WordPress plugins. Genom att använda ett plugin kan du enkelt lägga till en ikon typsnitt till något WordPress tema utan att ändra någon kod.

Det första du behöver göra är att installera och aktivera det bästa plugin-programmet. Vid aktivering kan du besöka Inställningar »Better Font Awesome sida för att konfigurera plugin-inställningarna. Pluggen fungerar dock ur lådan, så de flesta användare behöver inte ändra något där.

Better Font Awesome tillåter dig att lägga till teckensnitt ikoner med hjälp av kortnummer så här:

[ikonnamn = "raket"]
[ikonnamn = "moln"]
[ikonnamn = "hörlurar"]

Du kan också lägga till ikonerna i efterbehandlare genom att helt enkelt välja en ikon. Fortsätt skapa ett nytt inlägg eller redigera en befintlig, och du kommer att se Infoga ikon-knappen.

Om du klickar på det kommer det att dyka upp en popup där du kan hitta en ikon och infoga den.

Du kommer att märka att plugin kommer att lägga till en kortnummer i din inläggsredigerare som kommer att se ut så här:

[ikonnamn = "universitet"]

Om du vill anpassa ikonen ytterligare kan du lägga till din egen CSS-klass för att lägga till anpassade stilar.

[ikonnamn = "universitet"]

Nu kan du ställa in ikonen genom att använda CSS i ditt temat eller barntema stilark.

 .fa-universityicon font-size: 100px; Färg: # FF6600;  

Det är så enkelt.

Låt oss nu titta på hur du kan lägga till ikonfonter i WordPress utan ett plugin.

Lägga till ikonfonter i WordPress manuellt

Som vi nämnde tidigare är ikonfonter bara teckensnitt och kan läggas till din webbplats som att du skulle lägga till några anpassade teckensnitt.

Vissa ikon typsnitt som Font Awesome, är tillgängliga från CDN-servrar över hela webben och kan kopplas från ditt WordPress-tema direkt.

Du kan också ladda upp hela typsnittskatalogen till en mapp i ditt WordPress-tema och använd sedan de typsnitt som finns i ditt stilark.

Eftersom vi använder Font Awesome för denna handledning visar vi dig hur du kan lägga till den med båda metoderna.

Metod 1:

Det här är det enklaste. Allt du behöver göra är att lägga till den här enkla koden i ditt tema header.php filen precis före märka.

Den här metoden är enklaste, men det kan orsaka konflikter med andra plugins.

Ett bättre tillvägagångssätt för att ladda stilark eller skript i WordPress är att korrekt anklaga dem.

I stället för att länka till stilarket från tematets huvudmall kan du lägga till följande kod i ditt temas funktioner.php-fil eller i en webbplatsspecifik plugin.

 funktion wpb_load_fa () wp_enqueue_style ('wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');  add_action ('wp_enqueue_scripts', 'wpb_load_fa'); 

Metod 2:

Den andra metoden är inte det enklaste, men det skulle låta dig ha teckensnitt i ditt tema.

Hämta enkelt ikonens teckensnitt och pakka ut paketet. Nu måste du ansluta till din webbplats med en FTP-klient och gå till WordPress-tematkatalogen.

Du måste skapa en ny mapp där och namnge det teckensnitt. Därefter måste du ladda upp innehållet i ikonfonter-mappen till typsnittskatalogen på din server.

Nu är du redo att ladda ikonfonter i ditt WordPress-tema. Lägg bara till den här koden i ditt temas funktioner.php-fil eller i ett sajtspecifikt plugin.

 funktion wpb_load_fa () wp_enqueue_style ('wpb-fa', get_stylesheet_directory_uri (). '/fonts/css/font-awesome.min.css');  add_action ('wp_enqueue_scripts', 'wpb_load_fa'); 

Du har framgångsrikt laddat Font Awesome i ditt WordPress-tema.

Nu kommer den del där du kommer att lägga till faktiska ikoner i ditt WordPress-tema, inlägg eller sidor.

Visar manuellt ikonfonter i WordPress

Gå till Font Awesome hemsida för att se hela listan med tillgängliga ikoner. Klicka på vilken ikon du vill använda, och du kommer att kunna se ikonnamnet.

Kopiera ikonnamnet och använd det så här i WordPress.

Du kan ställa in denna ikon i ditt temans stilblock så här:

 .fa-optin-monster font-size: 50px; Färg: # FF6600;  

Du kan också kombinera olika ikoner tillsammans och stila dem på en gång. Låt oss säga att du vill visa en lista med länkar med ikoner bredvid dem. Du kan pakka dem under ett element med en specifik klass.

  Hem Bibliotek tillämpningar inställningar  

Nu kan du stile dem i ditt temans stilblock så här:

 .ikoner-grupp-objekt i färg: # 333; typsnittstorlek: 50px;  .icons-group-item i: svävar färg: # FF6600 

Vi hoppas att den här artikeln hjälper dig att lära dig hur du lätt lägger till ikonfonter i ditt WordPress-tema. Du kanske också vill titta på vår handledning om hur du lägger till bildikoner med navigationsmenyer i WordPress.

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