Vroeger waren icons, oftewel pictogrammen, al in overvloed beschikbaar, maar ze op een efficiënte manier implementeren in WordPress was andere koek. Je kon sommige problemen met sprites oplossen, maar dit was verre van ideaal. En toen retinaschermen populairder werden, werd het probleem alleen maar uitvergroot (letterlijk).
Een van de meest voorkomende oplossingen voor dit probleem is het gebruik van icon fonts, ook wel icoonlettertypes genoemd. Iconen zijn weblettertypen of vectoren, dus je kan ze oneindig schalen en er passen bovendien een boel pictogrammen in een bestand, waardoor je voor een pagina minder verzoeken nodig hebt. Hiermee kan je ongeveer elk icoon gebruiken die je je maar kan bedenken. Je zal echter te maken krijgen met mogelijke problemen wat betreft prestaties.
In dit artikel laten we je dus een aantal verschillende manieren zien om WordPress-icoonlettertypes kan gebruiken en vertellen we je welke methode voor jouw site het meest geschikt is.
- Waar je icoonlettertypes kan vinden
- Snelle en eenvoudige manieren om icoonlettertypes te gebruiken
- Prestatieproblemen om rekening mee te houden met icoonlettertypes
- Icoonlettertypes lokaal hosten (alleen degene die je nodig hebt)
- Icoonlettertypes en toegankelijkheid
Waar je icoonlettertypes kan vinden
Er zijn veel goede plekken waar je icoonlettertypes kan vinden voor je WordPress-website. Google naar ‘icon font’ en je krijgt een aantal mooie sites te zien. Een van de meest populaire en meest gebruikte is Font Awesome. Op het moment van schrijven kan je er 1.400+ gratis iconen vinden en 4.500+ betaalde iconen in hun pro versie. Bedenk het zo gek nog niet en ze hebben er een icoon voor, van interface tot sociaal, pijlen en andere soorten pictogrammen.
Hier zijn nog een aantal andere sites om te bekijken:
- IcoMoon is een andere populaire dienst met meer dan 5.500+ gratis vector-iconen en 4.000+ premium iconen. We maken verderop in het artikel gebruik van hun icoonlettertype generator.
- Fontello is een andere prima dienst waarmee je icoonlettertypes kan ontdekken en bouwen.
- Als je op zoek bent naar een super lichtgewicht iconenset, zorg dan dat je Bytesize eens bekijkt. Al hun 84 iconen ‘wegen’ slechts 9kb in geminificeerde vorm (2kB in SVGZ of Gzipped).
- Als je handmatig SVG-pictogrammen wil gebruiken, zal je geen betere gratis bibliotheek vinden dan iconmonstr of een betere premium bibliotheek dan Iconfinder.
Snelle en eenvoudige manieren om icoonlettertypes te gebruiken in WordPress
Laten we eerst eens dieper ingaan op een aantal snelle en eenvoudige methodes om icoonlettertypes te gebruiken in WordPress. Wel een waarschuwing: ze zijn niet allemaal even goed voor je performance. Vind je dit wel belangrijk dan kan je het beste meteen naar de sectie met de beste methode gaan.
Optie 1 – Gebruik een WordPress plugin
De snelste manier om met WordPress-fonticonen aan de slag te gaan is door een externe plugin te gebruiken. De gratis plugin Font Awesome Integration bevat de nieuwste icoonbibliotheek Font Awesome 5. Nadat je deze geïnstalleerd en geactiveerd hebt, kan je met een simpele shortcode een icoon invoegen. Ze hebben tegenwoordig zelfs een WordPress-icoon! Super cool.
Als je meer wil weten over andere manieren waarop je Font Awesome 5 kan gebruiken en aanpassen, bekijk dan even hun basic use chart en hun icoonbibliotheek. Hieronder hebben we bijvoorbeeld het WordPress-icoon van Font Awesome in een Gutenberg shortcode-blok ingevoegd en daarna fa-3x om hem drie keer groter te maken.
[fawesome iclass="fab fa-wordpress fa-3x"]
Dit is hoe het er in de front-end uitziet. Best eenvoudig, toch? We hadden binnen enkele minuten een werkend Font Awesome-icoon op onze site.
Als je meer makkelijk te gebruiken shortcodes wil zien, is de plugin Shortcodes Ultimate misschien ook wel iets voor jou. Ze hebben een premium add-on met iconen.
De bovenstaande oplossing is een prima oplossing als je het voor je klanten mogelijk wil maken om iconen aan hun berichten en pagina’s toe te voegen. Echter, als je deze elementen wil toevoegen aan je thema of plugin dan is het het beste om ze zelf toe te voegen (hieronder ga ik daar verder op in).
Optie 2 – Gebruik de ingebouwde dashicons
Dashicons is een verzameling ingebouwde lettertype-iconen die standaard met WordPress worden meegeleverd, omdat WordPress ze gebruikt voor de back-end. Je moet ze zelf enqueuen in de front-end, maar alles wat je nodig hebt is de naam van het script, het bestand is al beschikbaar in WordPress.
Je kan het volgende toevoegen aan je functions.php-bestand of we raden je aan om een gratis plugin te gebruiken als Code Snippets. Dit minimaliseert het risico om iets kapot te maken aan je thema en bovendien loop je niet het risico dat thema-updates je aanpassingen tenietdoen.
function my_theme_styles() {
wp_enqueue_style( 'dashicons' );
}Vervolgens kan je naar de Dashicons website gaan, een icoon selecteren en klikken op de link ‘copy HTML’ die je een code geeft waarmee je het icoon kan weergeven. Ze hebben geen enorme selectie, maar ze werken prima en zijn erg lichtgewicht.
<span class="dashicons dashicons-admin-post"></span>Hieronder hebben we bijvoorbeeld het dashboard-icoon in een Gutenberg HTML-blok gevoegd.
Dit is hoe het er in de front-end uitziet.
Dashicons heeft geen coole shortcodes die standaard meegeleverd worden, maar je kan de grootte van de iconen aanpassen met CSS. Hier is een voorbeeld van hoe je een icoon net voor de header invoegt.
<h2 class="dashicons-before dashicons-smiley">My Cool Headline</h2>Optie 3 – Handmatig linken naar extern gehoste icoonlettertypes
De derde optie is om handmatig te linken naar extern gehoste icoonlettertypes. Dit is in wezen wat de plugin in optie 1 achter de schermen doet.
Voor Font Awesome kan je de code van hun Start page halen en dan de onderstaande stappen volgen. Ze hosten al hun fonts gratis voor je op een CDN. Het ziet er ongeveer zo uit:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-xxxxx" crossorigin="anonymous">Stap 1
Kopieer de code in de <head> van elk sjabloon of pagina van je WordPress-site waar je Font Awesome wil gebruiken. Je kan het header.php-bestand van je thema rechtstreeks aanpassen of een simpele tutorial volgen over hoe je code aan je header toevoegt.
Stap 2
Je kan dan beginnen met iconen toevoegen in de HTML <body>. Zoek het juiste pictogram en leer hoe je het aan je pagina kan toevoegen.
Prestatieproblemen om rekening mee te houden met icoonlettertypes
Er is niets mis met bovenstaande methodes om icoonlettertypes aan je site toe te voegen, maar technisch gezien zijn ze niet de beste manier. Waarom? Dat heeft te maken met prestatieproblemen.
Je hebt waarschijnlijk niet al die iconen nodig
Ten eerste, als je een plugin gebruikt voor icoonlettertypes of om te linken naar een externe icoonlettertypebibliotheek, dan zal deze alle iconen uit de gehele bibliotheek laden. En als je slechts 20 gebruikt op je hele site, dan zijn er natuurlijk efficiëntere manieren om hiermee om te gaan.
We hebben bijvoorbeeld de bibliotheek van Font Awesome 5 opgenomen in onze site en hoewel het CSS-bestand ervoor klein is, is het bestand zelf 108kB. Hoewel dit misschien niet zo groot lijkt, zie je beneden hoe klein we dit bestand kunnen maken als we er alleen de HTML-lettertypes inzetten die we gaan gebruiken.
Het laden vanuit één CDN is meestal sneller
Er is niets mis met het laden van script vanuit verschillende CDN’s. Als je echter de mogelijkheid hebt om alles vanuit één CDN te laden, dan is dit doorgaans sneller. Waarom? Omdat het voordeel kan halen uit het gebruik van een enkele HTTP/2-verbinding en het verminderen van het aantal extra DNS-lookups. Zorg er wel voor dat je hoofd-CDN een goede is!
Icoonlettertypes lokaal hosten (alleen degene die je nodig hebt)
Een oplossing die de bovenstaande prestatieproblemen oplost is het lokaal hosten van de icoonlettertypes. Dit zullen we hieronder uitleggen en ook hoe je alleen de bestanden gebruikt die je nodig hebt. Met lokaal bedoelen we in dit geval het laden van de server van je WordPress-host of je eigen CDN.
Door alleen de icoonlettertypes te kiezen die je nodig hebt, kan je de bestandsgrootte verlagen van 100kB naar een paar kilobytes, super handig! Nog beter: je kan zelfs pictogrammen uitkiezen uit verschillende lettertypesets.
De basisprincipes – hoe het werkt
Concreet betekent het lokaal gebruiken van lettertype iconen dat je de lettertypebestanden (WOFF, WOFF 2, etc.) op je eigen webserver host, dan CSS gebruikt om de font face te laden en daarna mark-up aanmaakt om de iconen op de juiste plaats te tonen.
Hoewel je site één enkel bestand zal laden, worden er in de praktijk per lettertype een aantal bestandsindelingen aangemaakt, omdat browsers verschillende formats aanhouden. Font Awesome kent 6 verschillende bestandsindelingen: EOT, SVG, TTF, WOFF, WOFF 2 en OTF. Op basis van browserondersteuning heb je eigenlijk alleen WOFF of WOFF 2 nodig.
Tip: WOFF wordt door 93%+ van de moderne browsers ondersteund. WOFF 2 wordt echter meer geomprimeerd maar wordt slechts ondersteund door 83%+ van alle moderne browsers. We raden om een van twee of beide te kiezen. De browser zal dan bepalen op basis van je code welke geleverd moet worden naar de client.
Je eerste taak is om een tool te gebruiken waarmee je iconen kan kiezen die je wil gebruiken. Je kan deze bestanden dan aan de directory van je project toevoegen, meestal in een map met lettertypes.
Daarna kan je het CSS-bestand van Font Awesome toevoegen aan je project en het aan je website toevoegen als een standaard link-element.
<link rel="stylesheet" href="css/font-awesome.min.css">Je kan het CSS-bestand ook enqueuen of als het een klein bestand is, gewoon inline gebruiken.
Als je naar het CSS-bestand kijkt, zie je ook meteen wat er op de achtergrond plaatsvindt. De lettertypebestanden worden geladen, het basiselement met de klasse van .fa wordt gedefinieerd (samen met enkele andere) en tot slot wordt elk icoon gedefinieerd (bijv. fa-book).
Het enige waar je rekening mee moet houden is het pad naar je lettertypebestanden. Standaard worden ze geladen vanuit ../fonts, wat als lettertypemap zal fungeren, een map hoger dan het huidige CSS-bestand. Mogelijk moet je dit aanpassen aan je eigen mappenstructuur.
Nu je een beter idee hebt van hoe het werkt, gaan we je stap voor stap uitleggen hoe je het moet doen. In dit voorbeeld gebruiken we een e-commercesite.
Stap 1
Eerst moet je bepalen welke bibliotheek van icoonlettertypes je wil gebruiken. We hebben er aan het begin van dit artikel al een aantal met je gedeeld. In dit voorbeeld gebruiken we Font Awesome samen met de lettertype-generator IcoMoon. Als je de WOFF 2-bestanden van IcoMoon wilt, dan moet je eenmalig $9,00 betalen om toegang te krijgen tot hun premium bibliotheek.
Je kan de Font Awesome-iconen die je wil gebruiken gratis handmatig downloaden, maar als je hun WOFF of WOFF 2-bestanden wil aanpassen, dan heb je een tool als FontForge nodig. We zijn wel fan van eenvoudig, dus gebruiken we een generator.
Stap 2
Ga naar de IcoMoon generator. We klikken op ‘Add’ in de bibliotheek van Font Awesome.
Stap 3
Vervolgens kies je de iconen die je op je WordPress-site wil gebruiken. Als je al gebruik maakt van Font Awesome en slechts over wil stappen naar een lokaal gehost versie, doorloop ze dan, maak een shortlist en kies ze vervolgens uit de bibliotheek.
In dit voorbeeld kiezen we iconen voor perfmatters.io, een WordPress e-commercesite die loopt op Easy Digital Downloads.
Stap 4
Als je je iconen hebt uitgekozen, kan je onderaan op ‘Generate Font’ klikken. Voor deze site hadden we 20 iconen nodig.
De bestanden zien er dan ongeveer zo uit. De belangrijkste bestanden die je nodig hebt is het bestand style.css en de lettertypebestanden (WOFF, WOFF 2).
Stap 5
Vervolgens is het aan te raden om een zoek- en vervangopdracht uit te voeren in de style.css voordat je deze naar je site uploadt/kopieert. Dit is hoe de originele eruit ziet.
Voor degenen onder jullie die al gebruik maken van Font Awesome, dit maakt het eenvoudiger om de classes te veranderen naar die van Font Awesome. Op deze manier maak je automatisch gebruik van de iconen als er al iets van Font Awesome op de site stond.
Doe dus een zoekopdracht voor ‘icon’ en vervang alle hits met ‘fa’. Met een teksteditor zoals Sublime zou je snel een zoek- en vervangopdracht kunnen doen.
Dit vervang [class^="icon-"], [class*=" icon-"] met [class^="fa-"], [class*=" fa-"]. Het fikst ook meteen elk icoon, dus in plaats van dat het start met .icon-, begint het nu met .fa-.
Mogelijk moet je ook de source URL wijzigen op basis van de plek waar je de lettertypebestanden uit Stap 7 hebt geüpload. We raden aan om de URL te wijzigen in je CDN.
Stap 6
Vervolgens moet je de CSS toevoegen aan je site. Er zijn een aantal manieren waarop je dit kan doen.
Optie 1
Omdat de hoeveelheid CSS erg klein is, kan je alle CSS van het bestand kopiëren om deze te verplaatsen naar de WordPress Customizer. Doe dit nooit voor grote bestanden, maar dit is een relatief kleine hoeveelheid CSS. Dit betekent dat ze inline op je site worden geladen.
Optie 2
Je kan nu handmatig naar je stylesheet linken door deze in de header van je WordPress-site te plaatsen. Tip: Link naar je eigen CDN voor snellere prestaties.
<link rel="stylesheet" href="https://cdn.yourdomain.com/fonts/style.css">Optie 3
Je kan het CSS-bestand ook enqueuen in WordPress. Het proces lijkt erg op de handmatige manier. Voeg het volgende toe aan het functions.php-bestand of gebruik de gratis plugin Code Snippets. Mogelijk moet je de map wijzigen op basis van waar je deze hebt geüpload.
function my_theme_styles() {
wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );Stap 7
Nu de CSS aan je site is toegevoegd, is het tijd om de lettertypebestanden te uploaden. Je kan de lettertypes overal plaatsen, een map met de naam ‘fonts’ in de map /public is prima. Vergeet echter niet dat deze overeen moet komen met de source-map in je style.css-bestand.
Stap 8
Nu moeten we zorgen dat zowel de CSS- als lettertypebestanden van je WordPress-site toegankelijk moeten zijn. We moeten dus wat markup toevoegen aan de site. Dit is een voorbeeld van het toevoegen van een tandwielicoon.
<i class="fa fa-cog"></i>Je kan een werkend voorbeeld hiervan zien op perfmatter.io. Houd er rekening mee dat je elk element kan gebruiken, niet alleen i. Je kan ook reguliere span-elementen toevoegen, naast het toevoegen van CSS aan je custom classes.
Het echte verschil zie je als je het verschil in grootte bekijkt. Toen we linkten naar de externe bibliotheek van Font Awesome was de totale grootte van het lettertypebestand 108kB. Nadat we een fontgenerator gebruikten en alleen de Font Awesome-iconen kozen die we nodig hadden, was het bestand nog maar 2,6kB. Ons lettertypebestand daalde met maar liefst 97,59% in omvang!
Niet alleen dat, maar hij wordt nu ook vanuit onze CDN geladen, wat betekent dat er geen extra DNS-lookups naar fontawesome.com plaats hoeven te vinden.
Je kan dezelfde aanpak gebruik met SVG-iconen, er zijn slechts kleine verschillen.
Icoonlettertypes en toegankelijkheid
Een nadeel van icoonlettertypes zijn hun slechte toegankelijkheid. Schermlezers kunnen ze overslaan, of nog erger, de unicode of de naam van het teken voorlezen. Dit zou ervoor zorgen dat mensen met een visuele beperking ‘yellow star favourites’ horen wanneer ze naar je favoriete menu-items kijken – niet ideaal. Je moet er ook rekening mee houden wat er gebeurt als de lettertypes niet laden.
In het ideale geval wil je dat deze decoratie pictogrammen simpelweg verdwijnen als ze niet worden geladen en dat cruciale iconen worden vervangen als er een probleem optreedt.
Het probleem met toegankelijkheid is makkelijk te verhelpen, gebruik simpelweg de parameter en waarde aria-hidden="true" om aan de lezers aan te geven dat ze het element kunnen overslaan.
<span class="icon icon-star" aria-hidden="true"></span> My FavouritesIn een meer complete opstelling kan je ook Modernizr om te testen op font-face-support. Je hoeft alleen de CSS enigszins aan te passen. Zie het uitstekende Bulletproof Font Icons-artikel voor meer diepgaande informatie.
Voor informatie over het maken van cruciale pictogrammen die op tekst terug kunnen vallen, raden we ook aan het bovenstaande artikel te lezen, zij hebben het probleem zo goed mogelijk uitgelegd en opgelost, maar de implementatie ervan valt buiten de scope van dit artikel.
Samenvatting
Genoeg icoonlettertypes voor vandaag. Je zou nu een aantal verschillende manieren moeten kennen om makkelijk icon fonts op je WordPress-site te tonen, samen met de beste manier om ze te implementeren wat betreft performance.
We raden altijd aan om een lettertype-generator te gebruiken om een icoonlettertype te maken met daarin alleen de iconen die je echt gebruikt. Dit zal je thema aanzienlijk meer gestroomlijnd maken! Als je een favoriete bibliotheek of generator hebt die we niet hebben genoemd, laat het ons graag weten. Er zijn namelijk een groot aantal goede te vinden! Lees ook onze uitgebreide gids over WordPress-lettertypen.
Brian heeft een enorme passie voor WordPress, gebruikt het al meer dan tien jaar en heeft zelfs al aantal premium plugins ontwikkeld. Brian houdt van bloggen, films en hikes. Kom in contact met Brian op Twitter.
font-awesome-integration werd uitgeschakeld. “This plugin has been closed as of September 19, 2019 and is not available for download. Reason: Licensing/Trademark Violation.”
Frank, bedankt voor de melding. We zullen het artikel zo snel mogelijk bijwerken.