Font Awesome is de meest populaire icoon toolkit voor het web. Deze populariteit komt met name doordat de toolkit initieel ontworpen is voor Twitter Bootstrap. Vorig jaar december is versie 5 van Font Awesome gelanceerd. De gratis versie bestaat uit meer dan 1.000 iconen. De Pro versie gaat zelfs al richting 3.000 iconen.
De release van versie 5 is awesome. Naast het standaard icon webfont kan je met Font Awesome 5 ook gebruik maken van inline SVG-iconen. En dat biedt veel voordelen. Zo zijn de iconen 100% vector, heb je geen last van anti-aliasing issues en hoef je geen rekening te houden met line-height en letter-spacing. Het icoon is haarscherp en wordt altijd in het juiste formaat getoond.
Een ander groot voordeel van inline SVG is dat het icoon aanpasbaar is. Zo is het bijvoorbeeld vrij eenvoudig om een gradiënt (verloop) aan de iconen toe te voegen. Hoe? Ik laat het zien in deze blog.
Inline SVG-ondersteuning
Voor inline SVG-ondersteuning maakt Font Awesome gebruik van Javascript. Doormiddel van Javascript worden de iconen op het scherm getoond. Dit stukje techniek voegen we als volgt toe:
// Font Awesome
wp_register_script(
'fontawesome',
'/assets/fontawesome/js/all.js',
array(),
'5.2.0',
true
);
wp_enqueue_script( 'fontawesome' );Elementen met de class fal en een specifieke icoon class zoals fa-user worden automatisch omgezet naar een SVG-icoon. De output van het ‘user’ icoon is als volgt:
<svg class="svg-inline--fa fa-user fa-w-14" aria-hidden="true" data-prefix="fal" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M313.6 288c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zM416 464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16v-41.6C32 365.9 77.9 320 134.4 320c19.6 0 39.1 16 89.6 16 50.4 0 70-16 89.6-16 56.5 0 102.4 45.9 102.4 102.4V464zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm0-224c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path>
</svg>SVG-afbeeldingen zijn aanpasbaar. Dat wil zeggen dat je ze kunt aanpassen met Javascript of CSS. Op deze manier kunnen we een gradiënt toevoegen. De kleur van het icoon wordt bepaald door de fill CSS-eigenschap. Die eigenschap gaan we aanpassen door gebruik te maken van een ander SVG-element. Dat doen we door onderstaande code toe te voegen op de pagina waar het icoon staat:
<svg width="0" height="0">
<linearGradient id="fa-gradient" x1="100%" y1="100%" x2="0%" y2="0%">
<stop stop-color="#ffe293" offset="0%" />
<stop stop-color="#7f6000" offset="100%" />
</linearGradient>
</svg>Vervolgens maken we een referentie tussen het icoon en deze gradiënt SVG via CSS.
.svg-inline--fa {
* {
fill: url('#fa-gradient');
}
}Voilà, het resultaat is een Font Awesome icoon met een gradiënt. Uiteraard kan je met deze techniek het icoon op verschillende manieren aanpassen. Awesome!