Flexibele iconen met font-face
Ik ben op het idee gekomen om deze post te schrijven dankzij een artikel op het blog van Amerikaanse app bouwer Garret Murray. Murray schrijft hoe hij een web font gebruikt voor de iconen op zijn website. Simpel maar doeltreffend!
De voordelen zijn overduidelijk;
- Ander kleurtje? Geen probleem, gewoon de color veranderen in je CSS en je bent klaar
- Je kunt CSS3 text-shadows gebruiken om je iconen een mooie schaduw mee te geven
- Nooit meer zoeken naar dat “ene icoontje” als het goed is heb je hem namelijk al in je font-family staan
Maar hoe implementeer je het? Easy! Je zoek een font met de iconen die je wilt gebruiken – bijvoorbeeld “Iconic” van Some Random Dude – en upload het op Font Squirrel. Vervolgens zet je de bestanden op je server en de verwijzingen naar het font in je CSS en je bent klaar om te gaan.
Je wil natuurlijk niet dat er allemaal rare tekens in je broncode staan. Gelukkig is hier een makkelijke CSS oplossing voor. De :before pseudo class.
Die werkt als volgt:
Je zet de volgende code volgende in je HTML
<a class="flickr" href="http://www.flickr.com/photos/jeaccount">
Mijn Flickr
</a>
En in je CSS zet je (er van uitgaande dat de “f” het icoontje voor Flickr is in je geïmporteerde font)
a.flickr:before {
content: " f";
font-family: "iconic";
}
En je bent klaar om te gaan!
