Iconen

Voor het toevoegen van iconen binnen de website kan gebruik gemaakt worden van een icoon-lettertype via de classes icon en icon-{naam}.

Standaard maken deze classes gebruik van het meegeleverde icoon-lettertype van het thema. Zie beschikbare iconen voor meer informatie over deze standaard iconen. Daarnaast is het mogelijk om applicatie-specifieke iconen toe te voegen. Zie hiervoor andere iconen toevoegen.

Iconen gebruiken

Iconen kunnen toegepast worden op allerlei HTML-elementen, waaronder span, a, p en button.

Benodigde stappen

  1. Voeg de icon class toe aan het element.
  2. Voeg een icon-{naam} class toe, bijvoorbeeld icon-check om het check-icoon te gebruiken.
  3. Voeg een toegankelijke naam toe binnen het element. Deze wordt visueel verborgen, maar is belangrijk voor screenreader-gebruikers en voor wanneer CSS niet geladen kan worden.

Voorbeelden

span

Visueel voorbeeld

Gebruiker

HTML-voorbeeld

<span class="icon icon-user">Gebruiker</span>

button

Visueel voorbeeld

HTML-voorbeeld

<button class="icon icon-on-off">Aan- of uitschakelen</button>

Beschikbare iconen

De thema's worden geleverd met een icoon-lettertype en met icon-{naam} classes voor een set standaard iconen:

  • home
  • search
  • hamburger
  • close
  • questionmark
  • sort
  • ascending
  • descending
  • chevron-up
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-light-up
  • chevron-light-down
  • chevron-light-left
  • chevron-light-right
  • check
  • download
  • heart
  • lock-closed
  • on-off
  • outgoing
  • reset
  • smartphone
  • to-top
  • trash
  • user

Elk thema zou ernaar moeten streven de iconen in deze set te implementeren. Iconen die in een thema niet beschikbaar zijn, moeten door het thema als □ (het unicode-character U+25A1 "missing glyph") aangeboden worden. Extra iconen kunnen als aparte module aangeboden worden.

Andere iconen toevoegen

Er zijn twee manieren om iconen te gebruiken die niet beschikbaar zijn in de icoon-sets van het thema: