Tegenwoordig zie je op veel websites pictogrammen langskomen. Dat kan groot zijn, ter illustratie en verluchtiging van een blok tekst, maar ook klein, bijvoorbeeld een pictogram van een envelop voor een e-mailadres. Vroeger was het erg lastig om daar gebruik van te maken. Je moest zelf beschikken over tekentalent en de juiste software of iemand kennen die een pictogram voor je kon ontwerpen. Tegenwoordig is er echter een superhandige oplossing: Font Awesome!

Ontzettend handig

De werkwijze van Font Awesome zit deels verscholen in de naam. Het is een font (lettertype) dat niet bestaat uit letters, cijfers en andere tekens, zoals gebruikelijk is bij een lettertype, maar uit talloze pictogrammen. Dat heeft enkele voordelen:

  • het is makkelijk schaalbaar, zonder kwaliteitsverlies (afbeeldingen kan je niet altijd eindeloos uitvergroten.)
  • de pictogrammen nemen weinig schijfruimte in beslag, waardoor het gunstig is voor de laadtijd van je website

Font Awesome installeren

Font Awesome is niet standaard op elke website geïnstalleerd, hoewel het soms wordt meegeleverd met WordPressthema’s. Voor WordPress zijn wel diverse plugins beschikbaar die het mogelijk maken Font Awesomepictogrammen op je site te gebruiken. Better Font Awesome vind ik persoonlijk een erg handige.

Als je Better Font Awesome hebt geïnstalleerd kan je direct beginnen met het plaatsen van pictogrammen in je tekst. Op de site van Font Awesome vind je een lijst met alle pictogrammen. Middels een zoekfunctie kan je ook zoeken naar het pictogram dat je nodig hebt. Om het vervolgens in je site te plaatsen, heb je alleen nog een stukje code nodig.

Een pictogram plaatsen

Stel, we hebben net ‘auto’ ingetypt als zoekopdracht. Dan verschijnt vervolgens o.a. het pictogram van een auto. Als we daarop klikken kom je op een pagina met informatie over dat pictogram. Daar zie je o.a. een code staan: < i class=”fa fa-car” >< /i >Kopieer deze code en ga naar je WordPresseditor. Let op dat je rechts boven het editorscherm kiest voor ‘Tekst’ i.p.v. ‘Visueel’. Je zit dan in de modus waarbij je ook code kan invoeren.

Plak de code en sla de pagina op. Als je alle stappen goed hebt gedaan, zie je nu op je webpagina het icoontje staan.

Waar kan jij goed een pictogram voor gebruiken?

Desingo gaat duurzaam ondernemen. Ken of ben jij een duurzame ondernemer, liefst in de buurt van Haarlem? Meld je dan aan voor de brainstorm-/sparring-/uitwisselsessie van 10 februari 2016 waarin we elkaar helpen en ondersteunen. De sessie is dé plek voor het helpen met elkaars uitdagingen, het leggen van samenwerkingsverbanden en netwerken met andere duurzame ondernemers.