Als je hier bovenaan de pagina kijkt, zal je in de WordPress breadcrumb zien dat er een huisje voor “Home” staat. 
Dit huisje is een speciaal pictogram/icoon, want er wordt namelijk geen afbeelding voor gebruikt. Het is puur gemaakt in CSS en daarmee valt het onder een zogeheten “Icon font” (een beetje zoals Wingdings in Word). In dit artikel gaan we in op de mogelijkheden die er zijn met het gebruik van FontAwesome als Icon font.
Waarom zou je Icon Fonts gebruiken in plaats van afbeeldingen?
Het grote voordeel van de Icon Fonts is dat ze worden gezien als lettertypes. Hierdoor schalen ze meestal goed mee op responsive of mobiele websites en zorgen ze er dus voor dat je website er op ieder apparaat hetzelfde uit blijft zien. Verder kunnen ze dezelfde dingen als normale afbeeldingen, zo kan je ze bijvoorbeeld ook roteren of zelfs als geanimeerd icoon weergeven (bijvoorbeeld: ). Ook is het mogelijk om samengestelde iconen te maken. Neem bijvoorbeeld dit vierkant en het Twitter logo . Deze zou je vervolgens samen kunnen voegen tot dit:
Wat eerst wel een nadeel was van Font Icons, was de gelimiteerde keuze ervan. Je zit namelijk vast aan de iconen die gemaakt zijn door de ontwikkelaars (tenzij je ze zelf ontwikkelt natuurlijk), maar dat zijn er tegenwoordig al een hele boel (FontAwesome heeft er nu al 519). Ook is het vaak mogelijk om een bepaald icoon aan te vragen, en wie weet worden ze in de volgende update wel toegevoegd als er genoeg vraag naar is.
Hoe kan je dit op je eigen WordPress website gebruiken?
Het gebruiken van de icons is heel simpel. Het eerste wat je nodig hebt is een link naar waar de iconen te vinden zijn. Je kunt dit doen door het .css bestand te downloaden en op je website te zetten, of door simpelweg naar een CDN te linken waar ze op staan. In het geval van de CDN, voeg je onderstaande code toe tussen de <head></head> tags van je website:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?177b41">
Vervolgens is je WordPress website klaar om de iconen te gebruiken. Je kunt in de lijst opzoeken welk icoon je wilt hebben en als je erop klikt, krijg je de code te zien die je moet gebruiken. Voor het huisje is dit bijvoorbeeld <i class=”fa fa-home”></i>. Voor verdere opties zoals het draai-effect of vergroten van het icoon, kan je op deze pagina terecht.
De code van de iconen kan je overal op je website gebruiken. Zo kan je ze in de broncodes van je thema plaatsen, maar ook in berichten. Let er bij het gebruiken in berichten wel op dat je de code in de teksteditor-modus erin plaatst. Als je het namelijk in de visuele editor plakt, zal je op je website alleen de code zien en niet het icoon zelf.
Andere Icon fonts
Hoewel dit bericht voornamelijk gericht was op FontAwesome, zijn er natuurlijk ook een aantal andere Icon fonts. Over het algemeen beschikken deze wel over minder iconen en kan het dus voorkomen dat degene die je zoekt er (nog) niet tussen zit. Onderstaand een aantal andere Icon Fonts:
Foundation (283 icons)
Typicons (336 icons)
Linecons (48 icons)
Open Iconic (223 icons)
Laat een reactie achter