Over icon-lettertypes

Hier boven staat een rijtje icons. Het ligt voor de hand om te denken dat het plaatjes zijn, maar het zijn speciale letters. Verder valt op dat ze maar één kleur hebben. Hier is dat dezelfde kleur als de gewone letters op deze pagina, maar dat hoeft niet.

Dit soort "letters" maak je met behulp van een zogenaamd icon-lettertype of icon-font.
Het kan natuurlijk ook met gewone plaatjes, maar die worden al gauw lelijk als er op de pagina wordt ingezoomd. Fonts zijn (bijna) onbeperkt schaalbaar.

Icon-fonts zijn er in twee soorten:

1. De gewone karakter-set ABCD.... wordt overschreven door speciale tekens. Gebruikers van Windows kennen ongetwijfeld het font Wingdings. Daarin wordt bijvoorbeeld de tekenreeks
    
   ABCDEFGHIJKLMNOPQRSTVWXYZ0123456789.,!?
    
   vervangen door:
    
   ABCDEFGHIJKLMNOPQRSTVWXYZ0123456789.,!?
    
   Op een Windows-PC zie je mogelijk geen verschil als je een verouderde browser gebruikt én het font Wingdings op je PC is geïnstalleerd. In alle andere gevallen zie je waarschijnlijk geen verschil, omdat de meeste browsers geen lokale fonts meer accepteren (mede uit veiligheidsoverwegingen).
   Deze aanpak werkt in de praktijk dus niet.
    
2. De karakter-set van een font wordt uitgebreid met nieuwe tekens, icons in dit geval. De icons worden in een speciaal gedeelte van de font-file geplaatst en zijn dus bruikbaar naast de normale karakterset.
   Op deze bladzijde wordt het font glyphicons-halflings-regular van Jan Kovarik gebruikt. Dat heb ik overgenomen uit een website die is gemaakt met het Bootstrap-platform, versie 3.0.2. De benodigde CSS heb ik uit de file bootstrap.css gehaald.
    
   Het gebruik is eenvoudig:
   • Link het web-font zoals beschreven in het item Niet-standaard fonts gebruiken.
   • Op de plaats waar je een icon nodig hebt plaats je een <span>-tag. Deze heeft de classes glyphicon en glyphicon-[naam van het icon]. De class glyphicon bevat de algemene opmaak. De andere class verwijst naar het icon.
   Voor een envelopje ('e-mail') gebruik je de code:
       <span class="glyphicon glyphicon-envelope"></span>
       N.B. De <span>-tag moet leeg blijven!
   • Deze versie van het font glyphicons-halflings-regular bevat 200 icons. Een overzicht van de 200 beschikbare icons op deze website vind je HIER.

Op een vergelijkbare manier werkt Font Awesome. Dat is niet vreemd, want oorspronkelijk is het gemaakt voor Bootstrap.
Dit font kun je in je pagina opnemen vanaf een CDN, wat ik aanraad, want om het op je website-host te installeren vraagt veel ruimte. Op deze site is dat ca. 950kB (versie 4.6.1).

Op de site We Love Icon Fonts vind je een verzameling icons uit diverse bronnen. Het gebruik ervan is vergelijkbaar met wat hierboven is beschreven.

Dan zijn er ook nog de Material Icons van Google. Ook hier wordt CSS ingezet om de icons uit de font-files te halen.

Tenslotte
Het verkeerd gebruik van icons kan de gebruiksvriendelijkheid van je site hinderen. Gebruik een symbool alleen als het voor de gebruikers van je site 100% duidelijk is wat er wordt bedoeld.