Naar Core

Iconen

Iconen worden door middel van JavaScript geïnjecteerd. DUO maakt gebruik van een subset van de iconen uit de rijkshuisstijl.

Basis set

Hieronder staat een lijst van de beschikbare iconen. Klik op een icoon om de benodigde code naar het klembord te kopiëren.

Voor de webrichtlijnen is het noodzakelijk een role aan de icon toe te kennen, eventueel aangevuld met het title attribuut, zodat screenreaders begrijpen waarvoor het element bedoeld is.

Character encoding

Het is noodzakelijk (met name voor de correcte rendering van de iconen) dat alle UNO HTML, CSS en Javascript bestanden als UTF-8 geserveerd worden. Het is niet voldoende om een meta tag met charset="utf-8" in de head op te nemen. De server moet juist geconfigureerd zijn.

Als de character encoding niet juist is, zal je in plaats van een icoon één, twee of drie rare tekens zien zoals "æ‡å".

Of de settings juist zijn kan je zien in de Developer view (F12) aan de Response Header Content-Type: application/javascript; charset=utf-8. Als dat attribuut niet bij de headers voorkomt, kan de css nog altijd correct getoond worden, maar is dan niet gegarandeerd.

Als je lokaal serveert via IntelliJ kan je de character encoding ook afdwingen in de settings Editor > File Encodings.

Beschikbare iconen

Klik op een icon om de code naar het klembord te kopieren

  • arr-backward
  • arr-forward
  • calendar
  • check
  • checklist
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • clock
  • collapse-down
  • collapse-left
  • collapse-right
  • collapse-up
  • cross
  • delete
  • document
  • download
  • edit
  • filter
  • folder
  • hamburger
  • home
  • info
  • link-external
  • list
  • magnifier
  • mail
  • my-duo
  • note
  • question
  • secure
  • upload
  • user