FontAwesome laat niets aan de verbeelding over en is een heerlijke verzameling van schaalbare iconen die gebruikt kunnen worden in WordPress. In een reeks van blog posten, toon ik hoe je FontAwesome kan gebruiken in pagina’s, blog posts en zelfs in menu items.

Allereerst moeten we in het functions.php bestand van je thema, ondersteuning voor FontAwesome inbouwen en dat doen we met volgende code :

/** Fontawesome ondersteuning */

add_action ('wp_enqueue_scripts', 'hs_fontawesome');

function hs_fontawesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
}

Het is natuurlijk mogelijk dat het thema dat in gebruik is, reeds ondersteuning voor FontAwesome heeft ingebouwd en dan is deze stap niet nodig. Zoek hiervoor in het functions.php bestand naar “font-awesome.min.css” om dit te controleren. Sla je bestand op na het aanpassen.

Surf nu even naar het overzichtsscherm van iconen op de FontAwesome website en klik op het icoon dat je wil gebruiken (ik neem even het duimpje omhoog in dit voorbeeld). Je krijgt een scherm met onder andere dit :

Kopieer de code die in het groen is gemarkeerd.

Meld nu aan op je WordPress beheerscherm. Ga naar de pagina of blog post waar je het FontAwesome icoon wil gebruiken. Plak de code op de plaats waar je het icoon wil gebruiken :

Je kan deze nu via css aanpassen door bv de grootte aan te passen of de kleur:

Zo, dat was de eerste blog post in de reeks rond FontAwesome. Kom binnenkort kijken naar het tweede deel, waar we FontAwesome gaan gebruiken in navigatie-menu’s!

Heb je intussentijd nog vragen hierover, neem gerust even contact met me op!