Iconen op je website plaatsen via PNG, icon fonts, SVG of CSS
Een website tegenkomen die geen gebruikmaakt van iconen is een zeldzame aangelegenheid. Niet zo gek ook, aangezien ze in aanvulling op tekst veel voordelen met zich meebrengen. Iconen zijn herkenbaar, trekken snel de aandacht en besparen een hoop ruimte. De kans is dus aanzienlijk dat je ze ook op je eigen website gaat gebruiken. Voordat we ingaan op de beste icon packs voor je website in ons volgende artikel, willen we in dit artikel eerst de verschillende manieren uitlichten om iconen op je website te plaatsen. Moet je dat nou doen via een PNG-afbeelding, icon font, SVG-icoon of alleen via CSS-code?
Icoon via Afbeelding
Veruit de oudste manier om een icoon op je scherm te toveren, is door het inladen van een simpele afbeelding via de <img> tag.
In je HTML-document:
<img src="/icons/vraagteken-36px.png" alt="">
Op je scherm:
Het invoegen van iconen via afbeeldingen heeft echter twee grote nadelen:
Afbeeldingen zijn niet schaalbaar, waardoor je vaak meerdere afbeeldingen moet maken om een icoon er in verschillende formaten goed uit te laten zien. Een PNG-icoon van 36 pixels ziet er bijvoorbeeld een stuk minder mooi uit als je deze twee keer zo groot maakt.
Elke afbeelding zorgt voor een nieuw verzoek vanaf de browser van je bezoekers naar je eigen webserver (HTTP-request). Meer afbeeldingen zorgen voor meer verzoeken, wat op zijn beurt weer zorgt voor een langere laadtijd van je website.
Dit laatste punt is te ontwijken door middel van image sprites, waarbij meerdere iconen worden samengevoegd tot één grote afbeelding. Vervolgens wordt via CSS het juiste icoon aangeroepen en getoond.
Je image sprite:
In je CSS-stylesheet:
.vraagteken-24px, .vraagteken36px, .vraagteken-48px {
background-image: url('/icons/vraagtekens.png');
background-repeat: no-repeat;
}
.vraagteken-24px {
width: 24px;
height: 24px;
background-position: 0 0;
}
In je HTML-document:
<div class="vraagteken-24px"></div>Op je scherm:
Helaas neemt het samenvoegen van meerdere iconen tot één grote afbeelding en het uitrekenen van de icoonposities wat tijd in beslag. Ook moet je alert blijven op het toevoegen van de juiste afmetingen aan je image sprite. Dit is allemaal makkelijk op te lossen door over te stappen naar een icon font of SVG-iconen.
Icon fonts
Een icon font is eigenlijk een lettertype dat bestaat uit iconen. Net als met image sprites maken al je iconen onderdeel uit van één bestand. Een bijkomend voordeel is dat een lettertype meestal onbeperkt schaalbaar is zonder kwaliteitsverlies, wat betekent dat je iconen dit ook zijn. Dit verklaart onder andere de enorme populariteit van iconfont-pakketten als Font Awesome.
Ook het gebruiksgemak van icon fonts speelt een belangrijke rol in de populariteit ervan. Bovenin je HTML-document link je naar het ‘icoon-lettertype’ dat je wilt gebruiken. In de <body> is het toevoegen van één regel code vervolgens voldoende om een icoon te laten verschijnen.
In je HTML:
<head>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
<span class="fas fa-question-circle"></span>
</body>
Vervolgens pas je met CSS alles aan wat bij een normaal lettertype ook mogelijk is.
In je CSS-stylesheet:
.fas fa-question-circle {
color: black;
text-shadow: 1px 1px 1px #ddd;
font-size: 24px;
}
Ondanks de voordelen worden icon fonts niet door iedereen omarmd. Het grootste punt van kritiek is dat een lettertype nooit bedoeld is voor het huisvesten van iconen, maar – hoe kan het ook anders – voor letters. Iconen als lettertype hebben namelijk enkele nadelen.
De randen van een letter worden door de browser iets waziger gemaakt om de leesbaarheid te vergroten (anti aliasing). Alhoewel dit wenselijk is bij een letter, wil je dit gedrag niet hebben bij een font-icoon die er altijd scherp uit moet zien.
Net als een letter heeft een font-icoon bepaalde tekstattributen die de positie ervan ongewenst kunnen beïnvloeden (bijvoorbeeld line-height en vertical-alignment).
Het stijlen van een font-icoon via CSS is beperkt tot tekststijlen. Zo is het bijvoorbeeld mogelijk om een icoon in zijn geheel een andere kleur te geven (net als bij letters), maar niet bepaalde onderdelen van een icoon in te kleuren.
Ook al werkt het naar behoren, uit semantisch oogpunt is het raar om een icoon in te laden via een lettertype.
Als je de toegankelijkheid van je website belangrijk vindt, dan zal je de handen uit de mouwen moeten steken om alles goed in te stellen.
SVG-icoon
Een alternatief voor icon fonts die op steeds meer websites wordt toegepast, zijn SVG-iconen. In tegenstelling tot een font-icoon wordt een SVG-icoon gewoon als afbeelding aangemerkt. Een die is opgebouwd uit XML-code, maar in essentie een afbeelding blijft. Dit betekent dat je alle hiervoor genoemde nadelen van een lettertype niet hebt.
Een SVG-icoon ziet er ongeacht de grootte altijd scherp uit en staat op de positie waar je hem verwacht.
Een SVG-icoon heeft uitgebreidere stijlopties dan een font-icoon. Zo is het bijvoorbeeld mogelijk om een icoon verschillende kleuren te geven.
Semantisch gezien klopt het SVG-formaat beter voor iconen. Het zijn tenslotte afbeeldingen, geen lettertypen.
De toegankelijkheid van je iconen is ook beter dankzij de mogelijkheid om een titel en beschrijving aan je SVG-icoon mee te geven.
Aan de slag met een SVG-icoon
Een SVG-icoon is op meerdere manieren te implementeren op je website. Hierin wordt onderscheid gemaakt tussen externe SVG-bestanden en inline SVG.
Extern SVG-bestand via <img>
Net als elke afbeelding kan je een SVG invoegen via de <img> tag in je HTML-document. Daarnaast is het mogelijk om een alt-attribuut toe te voegen en de dimensies aan te passen via het width- en height-attribuut.
In je HTML-document:
<img src="/afbeeldingen/vraagteken.svg" alt="">Extern SVG-bestand als achtergrondafbeelding
Een soortgelijke oplossing is om een SVG-icoon in te laden via een achtergrondafbeelding in je CSS-stylesheet.
In je HTML-document:
<div class="vraagteken"></div>In je Style-sheet:
.vraagteken {
display: block;
text-indent: -9999px;
width: 24px;
height: 24px;
background: url(vraagteken.svg);
background-size: 24px 24px;
}
De bovenstaande methoden zijn echter beperkt als je de kleur of andere stijlen van jouw SVG-icoon wil aanpassen. Dit moet via de code in het SVG-bestand zelf. Je SVG-icoon stijlen via een externe CSS-stylesheet, wat een stuk makkelijker werkt, is helaas niet mogelijk. Daarnaast zijn beide methodes niet geschikt voor CSS3-animaties. Voor complete CSS-vrijheid is het daarom beter om jouw SVG-iconen in te laden via de <object> tag of via inline SVG.
Extern SVG-bestand via <object>
Een derde optie om een SVG-icoon extern in te laden, is via de <object> tag.
<object type="image/svg+xml" data="vraagteken.svg" class="vraagteken">Plaats hier een bericht voor browsers die geen SVG ondersteunen.</object>Via <object> is het wel mogelijk om je SVG-icoon te stijlen door middel van een externe CSS-stylesheet. Als enige vereiste geldt dat je als eerste regel in je SVG-bestand de volgende code plaatst.
In je SVG-bestand:
<?xml-stylesheet type="text/css" href="stylesheet.css" ?>Vervolgens mag je er in je CSS-stylesheet op los stijlen.
In je CSS-stylesheet:
.vraagteken {
fill: blue;
}Inline SVG
Een SVG-icoon is ten slotte ook zonder extern SVG-bestand in te laden door de code die erbij hoort direct in je HTML-bestand te plakken. Je bespaart hiermee een extra HTTP-request, maar je HTML-document wordt natuurlijk een stuk drukker zodra je meerdere en complexere SVG-iconen toevoegt. De onderstaande code hoort bijvoorbeeld maar bij één Facebook-icoontje.
In je HTML-document:
<svg viewBox="0 0 512 512" class="facebook-icoon”><path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"/></svg>In tegenstelling tot de <object> tag hoef je bij inline SVG helemaal niets toe te voegen in je SVG-bestand om het te stijlen via een externe CSS-stylesheet.
Inline SVG advanced: SVG sprites
Wanneer je veel SVG-iconen gebruikt, is het handig om ze te bundelen. Net als met PNG-afbeeldingen is het mogelijk om meerdere SVG-iconen samen te voegen tot één sprite. In plaats van een afbeelding (zoals bij image sprites) bestaat een SVG sprite uit samengevoegde SVG-code bovenin je HTML-document.
<body>
<svg xmlns="https://www.w3.org/2000/svg">
<symbol viewBox="0 0 100 100" id="vierkant">
<title="Blauw vierkant">
<desc="Een blauw vierkant ter voorbeeld">
<path d="M10 10H90V90H10Z"/>
</symbol>
<symbol viewBox="0 0 100 100" id="cirkel">
<circle cx="50" cy="50" r="40"/>
<title="Rode cirkel">
<desc="Een rode cirkel ter voorbeeld">
</symbol>
</svg>
</body>
Heb je vervolgens een bepaald icoon uit je SVG sprite nodig, dan kan je er met behulp van de <use> tag naar verwijzen in plaats van elke keer opnieuw het SVG-icoon uit te typen.
<svg>
<use xlink:href="#cirkel"/>
</svg>
In plaats van een interne verwijzing kan je er ook voor kiezen om de sprite op te slaan in een extern SVG-bestand en hiernaar te verwijzen.
<svg>
<use xlink:href="/icons/sprite.svg#cirkel"/>
</svg>
Ten slotte is het mogelijk om een class toe te voegen aan je <svg> tag en te variëren in stijl, ondanks dat je gebruikmaakt van steeds hetzelfde icoon uit je SVG sprite.
<svg class="icoon-1">
<use xlink:href="#cirkel"/>
</svg>
<svg class="icoon-2">
<use xlink:href="#cirkel"/>
</svg>
Alleen CSS
Een interessant alternatief voor inline SVG is het vormen van iconen door alleen maar gebruik te maken van CSS-code. Je HTML-document wordt in dat geval bevrijd van lange regels vol SVG-code, maar in ruil daarvoor krijg je er wel een vollere CSS-stylesheet voor terug. Voor een simpel plusteken is bijvoorbeeld het volgende nodig. Zie voor meer voorbeelden de website van CSS Icon.
In je HTML-document:
<div class="plus icon"></div>In je CSS-stylesheet:
.plus.icon {
color: #000;
position: absolute;
margin-left: 3px;
margin-top: 10px;
}
.plus.icon:before {
content: '';
position: absolute;
width: 15px;
height: 1px;
background-color: currentColor;
}
.plus.icon:after {
content: '';
position: absolute;
width: 15px;
height: 1px;
background-color: currentColor;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
Naast een vollere CSS-stylesheet ben je met pure CSS ook beperkt in de mogelijkheid om complexe vormen – en dus complexe iconen – te maken.
It depends…
Zoals wel vaker zal het per geval afhangen welke methode voor het inladen van iconen het beste past bij jouw website. Je hebt gezien dat de gebruiksscenario’s van PNG- en CSS-iconen beperkt zijn en daarom zal de meerderheid van de icoongebruikers kiezen voor icon fonts of SVG-iconen. Een grote groep zal als een blok vallen voor het gebruiksgemak van icon fonts en de hiaten hiervan voor lief nemen. Maar het ziet er naar uit dat de toekomst uiteindelijk in SVG zit. Welke manier je ook kiest, hou in ieder geval ons blog in de gaten en ontdek volgende week de beste gratis icon packs!
Bedankt voor het toelichten!