Wie rasterafbeeldingen gebruikt om icoontjes op websites weer te geven, zal bekend zijn met de tekortkomingen van deze methode.
Zo leidt het gebruik van veel icoontjes tot veel HTTP-verzoeken aan de browser en kan de bestandsgrootte van een afbeelding erg groot zijn. In beide gevallen duurt het langer voordat de website geladen is.
Daarnaast zorgen het inzoomen en het gebruik van hoge resolutieschermen voor vage afbeeldingen.

Icon fonts maken korte metten met deze problemen en zijn daarom erg populair. Maar…ze bieden nog meer voordelen!

Wat zijn Icon fonts?

Icon fonts zijn fonts die volledig uit afbeeldingen bestaan. Voor wie niet weet waar ik het over heb: denk maar eens aan Webdings, Wingdings en Dingbats van vroeger.
Op dit moment is er een enorm aanbod aan icon fonts te vinden, die je gratis of tegen betaling kunt downloaden en gebruiken.
Heb je eenmaal een leuk icon font gevonden, dan kun je deze met behulp van CSS gemakkelijk op je website weergeven en naar wens aanpassen.

De voordelen

Zoals gezegd bieden icon fonts voordelen boven het gebruik van rasterafbeeldingen. Maar welke zijn dit dan?

1. Icon fonts zijn vector-gebaseerd, waardoor ze resolutie-onafhankelijk zijn. Dit houdt in dat de icoontjes altijd haarscherp zijn.
2. In tegenstelling tot rasterafbeeldingen, is er bij icon fonts sprake van een enkel bestand en dus maar één HTTP-verzoek.
3. bestandsgrootte is aanzienlijk kleiner dan bij rasterafbeeldingen, zodat de laadtijd van de website nagenoeg gelijk blijft.
4. Aangezien een icoon hier in feite een font is, kun je met behulp van CSS eenvoudig de kleur, vorm, transparantie of grootte van een individueel icoon aanpassen.
5. Ook kun je het icoontje animeren met CSS3 ( ).
6. Net als bij rasterafbeeldingen, kun je icon fonts roteren, schaduw toevoegen en de opaciteit aanpassen. Ook kun je icoontjes combineren:
   
   

Enkele aspecten om rekening mee te houden

Klinkt allemaal goed, maar toch zijn er een drietal zaken waar je rekening mee moet houden als je icon fonts gaat gebruiken:

Ten eerste moeten browsers van webbezoekers ondersteuning bieden aan de CSS eigenschap “@font-face”, welke voor de weergave van het icon font zorgt. Dit volgens de website caniuse.com niet altijd het geval.
Zo bieden IE6-8, iOS Safari 3.2-4.1, Android 2.2-3 en Blackberry Browser 7 slechts gedeeltelijke ondersteuning. Firefox 2-3, Safari 3.1, Opera Mini 8 en Android Browser 2.1 helemaal geen ondersteuning.
Wie poblemen met weergave wil voorkomen, doet er daarom goed aan om eerst een check doen met Modernizr. Hiermee kun je testen of een browser “@font-face” wel of niet ondersteund.
Is dat niet het geval, dan kun je cruciale icoontjes op de website altijd vervangen door tekst of een rasterafbeelding van een soortgelijk icoon. Gaat het om een decoratief icoontje, dan kun je er voor kiezen deze te verwijderen.
Hoe dit checken, vervangen en verwijderen precies in zijn werk gaat, kun je lezen in het duidelijke artikel “ Bulletproof accessable icon fonts” van de Filament Group.

Het tweede punt waar je op moet letten, is dat browsers van webbezoekers ook de “::before” en “::after” selectoren binnen de content eigenschap voor pseudo elementen ondersteunen.
Vooral IE8-11 gebruikers ondervinden hiervan nogal wat problemen, vanwege bugs in de browser. Het is dus zaak voor de webontwikkelaar hier goed mee om te gaan.

Tot slot dien je er rekening mee te houden dat screen readers icon fonts niet altijd inlezen. Ook komt het voor dat screen readers icon fonts wel inlezen, maar vervolgens de bijbehorende alfabetische letter uitspreken en niet de naam van het icoontje.

Zijn deze tekortkomingen voor jou echter geen probleem of vind je ze te verwaarlozen? Dan zou ik zeggen: wees hip, doe mee met deze hype en ga lekker aan de slag met icon fonts!

De meest populaire font icons:
Font Awesome
Bootstrap
Foundation

Meer informatie over font icons:
Hongkiat.com. A guide to: better and sharper UI icons with web fonts. Verkregen op: 18 maart 2015.
CSS-tricks.com. Icon fonts are awesome. Verkregen op 17 maart 2015.
Codementor.io (2014). Pros & cons for icon fints like Font Awesome – Design tips for developers.
Occhio.nl (2014). Iconfonts zijn cool!