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>

Icoon binnen linka

Visueel voorbeeld

Inloggen

HTML-voorbeeld

<a href="./icons"><span class="icon icon-user" aria-hidden="true"></span>Inloggen</a>

button

Visueel voorbeeld pseudo-element op button

Waarschuwing: Het voorbeeld met een pseudo-element direct op button wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid. Gebruik in plaats hiervan een van de overige voorbeelden.

HTML-voorbeeld

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

Visueel voorbeeld button met span

HTML-voorbeeld

<button>
  <span class="icon icon-on-off" aria-hidden="true"></span>Aan- of uitschakelen
</button>

svg

Voorbeelden met een svg-icoon uit de tabler iconen set.

Aandachtspunten:

  • Als het icoon puur decoratief is, kan deze verborgen worden voor screenreader-gebruikers. Dit kan doormiddel van een aria-hidden="true" op de svg.
  • Als het icoon informatief is dient deze een kort en duidelijk label te krijgen als alternatief voor screenreader-gebruikers. Bijvoorbeeld: aria-label="Gebruikersprofiel". Het icoon dient in dit geval ook role="img" te krijgen.

Visueel voorbeeld informatief icoon

HTML-voorbeeld

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="16"
  height="16"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class="icon icon-tabler icons-tabler-outline icon-tabler-user"
  role="img"
  aria-label="Gebruikersprofiel">
  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
  <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>

svg binnen een link

Visueel voorbeeld

Inloggen

HTML-voorbeeld

<a href="./icons">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="icon icon-tabler icons-tabler-outline icon-tabler-user"
    aria-hidden="true">
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/>
    <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
  </svg>
  Inloggen
</a>

svg binnen een button

Visueel voorbeeld

HTML-voorbeeld

<button>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="icon icon-tabler icons-tabler-outline icon-tabler-power"
    aria-hidden="true">
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M7 6a7.75 7.75 0 1 0 10 0"/>
    <path d="M12 4l0 8" />
    </svg>
  Aan- of uitschakelen
</button>

span met svg-icoon

Visueel voorbeeld

Inloggen

HTML-voorbeeld

<span>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="icon icon-tabler icons-tabler-outline icon-tabler-user"
    aria-hidden="true">
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/>
    <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
  </svg>
  Inloggen
</span>

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: