Eenvoudig toevoegen van pictogramlettertypen in uw WordPress-thema

Wilt u pictogramlettertypen toevoegen aan uw WordPress-site? Onlangs vroeg een van onze gebruikers ons wat de gemakkelijkste manier is om pictogramlettertypen toe te voegen aan hun WordPress-thema? Pictogramlettertypen Hiermee kunt u vectorpictogrammen toevoegen zonder uw website te vertragen. In dit artikel laten we u zien hoe u eenvoudig pictogramlettertypen kunt toevoegen in uw WordPress-thema.

Wat zijn pictogramlettertypen en waarom u ze moet gebruiken?

Pictogramlettertypen bevatten symbolen of pictogrammen in plaats van letters en cijfers. Deze pictogrammen kunnen eenvoudig worden aangepast met behulp van CSS zonder de downloadgrootte van uw pagina aanzienlijk te vergroten.

Pictogramlettertypen kunnen worden gebruikt voor het weergeven van veelgebruikte symbolen. Op een doorsnee website kunt u ze gebruiken voor uw winkelwagentje, downloadknoppen, feature-boxes, schuifknoppen, socialemediaknoppen en zelfs in WordPress-navigatiemenu's.

Er zijn verschillende gratis en open source pictogramlettertypen beschikbaar met honderden pictogrammen. In feite wordt elke WordPress-installatie geleverd met de gratis lettertype-set van het dashicons-pictogram. Deze pictogrammen worden gebruikt in de WordPress-werkbalk admin in het beheerdersgedeelte.

Enkele andere populaire pictogramlettertypen zijn:

• Font Awesome
• Genericons
• IcoMoon
• Linearicons

In het belang van deze tutorial zullen we FontAwesome gebruiken. Het is het meest populaire, gratis en open source pictogramlettertype dat beschikbaar is, en we gebruiken het ook op onze OptinMonster-bouwer.

We gaan twee manieren behandelen om pictogramlettertypen toe te voegen in WordPress. De eerste methode gebruikt een plug-in, en de tweede methode laat zien hoe je een pictogramlettertype toevoegt zonder een plug-in.

Pictogramlettertypen toevoegen in WordPress Plug-ins gebruiken

FontAwesome en andere gratis pictogramlettertypen worden door veel WordPress-plug-ins ondersteund. Met behulp van een plug-in kunt u eenvoudig een pictogramlettertype toevoegen aan elk WordPress-thema zonder een code te wijzigen.

Het eerste wat u hoeft te doen is de Better Font Awesome-plug-in installeren en activeren. Na activering kunt u bezoeken Instellingen »Betere lettertype geweldig pagina om de plug-in-instellingen te configureren. De plug-in werkt echter uit de doos, dus de meeste gebruikers hoeven daar niets te veranderen.

Met Better Font Awesome kun je lettertype-iconen toevoegen met behulp van shortcodes zoals deze:

[pictogramnaam = "raket"]
[pictogramnaam = "cloud"]
[pictogramnaam = "hoofdtelefoon"]

U kunt ook de pictogrammen in de berichteditor toevoegen door eenvoudigweg een pictogram te selecteren. Ga je gang, maak een nieuw bericht aan of bewerk een bestaand bericht, en je zult het zien Knop Pictogram invoegen.

Als u erop klikt, verschijnt er een pop-up waarin u een pictogram kunt vinden en invoegen.

U zult merken dat de plug-in een shortcode zal toevoegen in uw berichteditor, die er als volgt uitziet:

[pictogramnaam = "universiteit"]

Als u het pictogram verder wilt aanpassen, kunt u uw eigen CSS-klasse toevoegen om aangepaste stijlen toe te voegen.

[pictogramnaam = "universiteit"]

Nu kunt u het pictogram opmaken met behulp van CSS in de stylesheet van uw thema of het thema van uw kind.

 .fa-universityicon font-size: 100px; color: # FF6600;  

Het is zo simpel.

Laten we nu eens kijken hoe u pictogramlettertypen kunt toevoegen in WordPress zonder een plug-in.

Pictogramlettertypen toevoegen in WordPress Handmatig

Zoals we eerder al zeiden, zijn pictogramlettertypen alleen maar lettertypen en kunnen ze aan uw site worden toegevoegd alsof u aangepaste lettertypen zou toevoegen.

Sommige pictogramlettertypen, zoals Font Awesome, zijn beschikbaar op CDN-servers op internet en kunnen rechtstreeks vanuit uw WordPress-thema worden gekoppeld.

U kunt ook de hele lettertypemap naar een map in uw WordPress-thema uploaden en die lettertypen vervolgens in uw stylesheet gebruiken.

Omdat we Font Awesome gebruiken voor deze zelfstudie, laten we u zien hoe u deze met beide methoden kunt toevoegen.

Methode 1:

Dit is de gemakkelijkste. Het enige wat je hoeft te doen is deze regel code toevoegen aan je thema's header.php bestand net voor de label.

Deze methode is het eenvoudigst, maar kan conflicten veroorzaken met andere plug-ins.

Een betere benadering van het laden van stylesheets of scripts in WordPress is om ze op de juiste manier in de wacht te slepen.

In plaats van een link naar het stylesheet te maken vanuit de kopsjabloon van uw thema, kunt u de volgende code toevoegen aan het function.php-bestand van uw thema of in een sitespecifieke plug-in.

 functie 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'); 

Methode 2:

De tweede methode is niet de gemakkelijkste, maar het zou u toelaten om de lettertypen binnen uw thema te hebben.

Download eenvoudig de pictogramlettertypen en pak het pakket uit. Nu moet u verbinding maken met uw website met behulp van een FTP-client en naar de directory van uw WordPress-thema gaan.

U moet daar een nieuwe map maken en fonts een naam geven. Vervolgens moet u de inhoud van de map met pictogramlettertypen uploaden naar de map met lettertypen op uw server.

Nu bent u klaar om pictogramlettertypen in uw WordPress-thema te laden. Voeg deze code toe aan het function.php-bestand van uw thema of in een sitespecifieke plug-in.

 functie 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'); 

Je hebt met succes Font Awesome geladen in je WordPress-thema.

Nu komt het gedeelte waar u echte pictogrammen zult toevoegen aan uw WordPress-thema, berichten of pagina's.

Handmatig pictogramlettertypen weergeven in WordPress

Ga naar de website van Font Awesome om de volledige lijst met beschikbare pictogrammen te bekijken. Klik op een pictogram dat u wilt gebruiken en u kunt de naam van het pictogram zien.

Kopieer de pictogramnaam en gebruik het als volgt in WordPress.

Je kunt dit pictogram op de volgende manier stijlen in de stylesheet van je thema:

 .faoptin-monster font-size: 50px; color: # FF6600;  

U kunt ook verschillende pictogrammen combineren en ze in één keer stijlen. Laten we bijvoorbeeld zeggen dat u een lijst met links met pictogrammen ernaast wilt weergeven. Je kunt ze onder een element met een specifieke klasse wikkelen.

  Huis Bibliotheek toepassingen instellingen  

Nu kunt u ze op de volgende manier stylen in de stylesheet van uw thema:

 .icons-group-item i color: # 333; lettertypegrootte: 50px;  .icons-group-item i: hover color: # FF6600 

We hopen dat dit artikel u heeft geholpen bij het eenvoudig toevoegen van pictogramlettertypen in uw WordPress-thema. U kunt ook een kijkje nemen in onze tutorial over het toevoegen van afbeeldingspictogrammen met navigatiemenu's in WordPress.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.