Iconen
Voor iconen wordt er gebruik gemaakt van een CIBG Icons font. Dit is een iconset die is gebaseerd op het RO Icons font en is aangepast en uitgebreid met iconen voor het CIBG.
Er zijn verschillende manieren om iconen te gebruiken:
- In-line een icoon gebruiken met een
spanmet de classiconénicoon class. Voorbeeld:<span class="icon zoeken"></span>. - Een element voorzien van een icoon met een eigen
::beforeclass waarin je het unicode karakter zet uit de tabel hieronder. Je kunt dan naar de code van.iconkijken in de CIBG Huisstijl om te zien hoe dit werkt.
Toegankelijkheid
- Iconen worden in principe altijd gebruikt als decoratie in knoppen via een
::beforeattribuut. Zorg er als je knoppen hebt zonder labels, dat je altijd een screen-reader tekstalternatief gebruikt. Afhankelijk van de toepassing is dit vaak een.visually-hidden. - Voor screenreader is er een leeg tekstalternatief ingesteld in het
::beforeattribuutcontentzodat de unicode niet wordt voorgelezen.
Overzicht iconen
De volgende tabel toon de beschikbare iconen. De afbeeldingen hebben in dit geval een aria-label,
zodat dit alternatief wordt voorgelezen
wanneer de door de afbeeldingen op de pagina wordt gegaan met een screen reader.
| Voorbeeld | CSS class | Unicode |
|---|---|---|
.menu |
\EA01 | |
.zoeken |
\EA02 | |
.kalender-1 |
\EA03 | |
.kalender-2 |
\EA04 | |
.kalender-3 |
\EA05 | |
.chevron-left |
\EA06 | |
.chevron-up |
\EA07 | |
.chevron-down |
\EA08 | |
.chevron-right |
\EA09 | |
.download |
\EA0A | |
.open-nieuw |
\EA0B | |
.vragen |
\EA0C | |
.plus-cirkel |
\EA0D | |
.email |
\EA0E | |
.attentie-blok |
\EA0F | |
.streep |
\EA10 | |
.pijl-links |
\EA11 | |
.pijl-omhoog |
\EA12 | |
.pijl-omlaag |
\EA13 | |
.pijl-rechts |
\EA14 | |
.plus |
\EA15 | |
.plus-thin |
\EA16 | |
.document |
\EA17 | |
.kruis |
\EA18 | |
.kruis-thin |
\EA19 | |
.nieuw-bericht |
\EA1A | |
.chevron-left-thin |
\EA1B | |
.chevron-right-thin |
\EA1C | |
.map |
\EA1D | |
.map-solid |
\EA1E | |
.vraagteken |
\EA1F | |
.verwijderen |
\EA20 | |
.copyright |
\EA21 | |
.play |
\EA22 | |
.uitloggen |
\EA23 | |
.filter |
\EA24 | |
.attentie |
\EA25 | |
.opmerking |
\EA26 | |
.klok |
\EA27 | |
.alarm |
\EA28 | |
.favoriet |
\EA29 | |
.blok |
\EA2A | |
.inloggen |
\EA2B | |
.csv |
\EA2C | |
.more |
\EA2D | |
.ascending |
\EA2E | |
.sort |
\EA2F | |
.descending |
\EA30 | |
.bewerken |
\EA31 | |
.check-thin |
\EA32 | |
.undo |
\EA33 | |
.check |
\EA34 | |
.uitroepteken |
\EA35 | |
.info |
\EA36 | |
.bestand |
\EA37 | |
.bestand-solid |
\EA38 | |
.csv-solid |
\EA39 | |
.excel |
\EA3A | |
.excel-solid |
\EA3B | |
.pdf |
\EA3C | |
.pdf-solid |
\EA3D | |
.word |
\EA3E | |
.word-solid |
\EA3F | |
.tijd |
\EA42 | |
.info-blok |
\EA43 |