Icoonfonts 101

Icoonfonts zijn lettertypen waarbij de glyphs — normaal letters en cijfers — zijn vervangen door pictografische symbolen. In plaats van de letter "A" te renderen, rendert een icoonfont een huisicoon, een zoekloep of een winkelwagen.

Omdat de iconen in een fontbestand leven, gedragen ze zich precies als tekst. U kunt ze naar elke grootte schalen met font-size, hun kleur wijzigen met color, tekstschaduwen toevoegen, CSS-overgangen toepassen en ze zelfs animeren — alles zonder één afbeeldingsbestand aan te raken.

Deze aanpak levert verschillende praktische voordelen op:

• Resolutieonafhankelijkheid — vectorcontouren schalen scherp op elke schermresolutie
• Kleine payload — één gecomprimeerd fontbestand vervangt tientallen afzonderlijke afbeeldingsassets
• CSS-besturing — kleur, grootte, schaduw, doorzichtigheid en hover-statussen zijn gratis met tekststyling
• Eén HTTP-verzoek — de volledige iconenset laadt in één netwerkrondrit

In het vroege web vertrouwden ontwikkelaars op afzonderlijke afbeeldingen of CSS-afbeeldingssprites — grote samengestelde afbeeldingen waarbij elk icoon een vaste rechthoekige regio innam. Sprites verminderden HTTP-verzoeken, maar waren kwetsbaar: een icoon toevoegen of vergroten betekende de volledige spritesheet opnieuw genereren en pixeloffsets handmatig bijwerken.

Rond 2012 maakten projecten als Font Awesome en IcoMoon een schoner alternatief populair: iconen verpakken als fontglyphs die zijn gekoppeld aan het Privégebruiksgebied van Unicode. Ontwerpers konden een volledige iconenset verwisselen door slechts één @font-face-declaratie te wijzigen, en ontwikkelaars konden iconen stijlen met dezelfde CSS die ze al voor tekst gebruikten. De techniek verspreidde zich snel en blijft een betrouwbare, lichtgewicht keuze voor ontwerpsystemen die monochrome iconografie gebruiken.

Het debat "icoonfonts vs inline SVG" is al meer dan een decennium een vast onderwerp in front-enddiscussies. Beide benaderingen zijn geldig — de juiste keuze hangt af van de vereisten van uw project.

Icoonfonts

• Eén HTTP-verzoek — één fontbestand levert elk icoon
• Uiterst eenvoudige CSS-styling — wijzig color, font-size en text-shadow zoals elke tekst
• Alleen monochroom — elke glyph ondersteunt één vulkleur
• Eenvoudig te integreren — voeg een stylesheetkoppeling toe, gebruik een CSS-klasse, klaar

Inline SVG

• Meerkleurig — elk pad kan zijn eigen fill, stroke of verloop hebben
• Standaard toegankelijk — <title> en aria-label geven schermlezers echte semantiek
• Afzonderlijk cacheerbaar — ongebruikte iconen worden nooit gedownload
• Gedetailleerde controle — afzonderlijke paden animeren, filters per element toepassen

SVG Sprites

• Combineer meerdere SVG's in één <symbol>-spritesheet
• Verwijs naar iconen met <use href="#icon-name">
• Biedt de voordelen van beide — één verzoek, meerkleurig, toegankelijk — maar vereist een complexere buildpipeline

Icoonfonts kunnen worden verpakt in vijf bestandsformaten, elk met verschillende compressie, browserondersteuning en gebruikssituaties. Hier is een snel overzicht:

Weet u niet welke formaten u moet opnemen? Gebruik deze praktische beslissingsgids:

• Als u er maar één kiest — stuur WOFF2. Het biedt de beste compressie (Brotli) en dekt 97%+ van de browsers.
• Als u IE 11-ondersteuning nodig heeft — stuur WOFF2 + WOFF. WOFF behandelt de resterende browsers zonder Brotli-decodering.
• Als u IE 8-ondersteuning nodig heeft — stuur WOFF2 + WOFF + EOT. EOT is het enige formaat dat Internet Explorer 6-8 begrijpt.
• Voor desktopapplicaties — gebruik TTF. Het is het native formaat voor fontrendering op besturingssysteemniveau op Windows, macOS en Linux.
• Voor het debuggen van fontproblemen — inspecteer de SVG Font. De XML-structuur is voor mensen leesbaar, waardoor glyph-paden en metadata eenvoudig te verifiëren zijn.

Duik dieper in elk formaat om de interne werking, browsercompatibiliteit en best practices te begrijpen:

Leer hoe u deze formaten in uw projecten gebruikt: