Lettertype iconen en toolkit – Font Awesome

Font Awesome banner

Font Awesome is een icoon toolkit gebaseerd op CSS, het bestandsformaat SVG wordt gebruikt, zo kunnen de iconen oneindig groot worden weergegeven zonder dat het ten koste gaat van de kwaliteit.

Voordelen:
– Gratis in gebruik. Ook voor commerciële doeleinden.
– Makkelijk in gebruik. Voeg snel een plaatje (icoon) toe.
– Geen javascript nodig. Enkel HTML.
– Volledig aan te passen met CSS. Geef een eigen kleur, schaduw of bepaal de grootte.
– Ruim keuze uit meer dan 400 icoontjes. Dit wordt meerdere malen per jaar aangevuld met nieuwe

Download Font Awesome / Font Awesome @ Github.com

De toolkit is eenvoudig te laden door het CSS bestand in te laden, daarna kan men met afkortingen de iconen laten weergeven.

Een overzicht van de iconen vind je hier.

Voorbeeld om iconen weer te geven maak bijvoorbeeld een index.html bestand aan met de volgende inhoud:

Geeft het volgende resultaat:

Font Awesome simpel voorbeeld

Meerdere iconen op elkaar

Het is mogelijk meerdere iconen over elkaar heen te plaatsen, gebruik de class  fa-stack op het hoofd, dan  fa-stack-1x voor de standaard grootte icon en  fa-stack-2x voor de grotere icoon, voorbeeld:

Het resultaat:
Font Awesome iconen over elkaar voorbeeld

Bootstrap 3 voorbeeld

Dit is Font Awesome in combinatie met Bootstrap 3.

Het resultaat:

Font Awesome met bootstrap 3 voorbeeld

Veel meer voorbeelden zijn hier te vinden.