Menu Uno designsysteem 5.3.5

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 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 settingsjuist 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 headersvoorkomt, 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.

Icon kleuren

Om snel kleuren te veranderen van iconen zijn er een aantal kleur classes die op het icoon kunnen worden gezet.

Wit: icon-white

Zwart: icon-black

Blauw: icon-blue

Beschikbare iconen

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