Icons - Handbuch wien.gv.at

Über das Pattern

Eine Liste aller verfügbaren Icons inklusive IDs gibt es in der Icon-Übersicht.
Icons dürfen nicht eingefärbt werden (Ausnahme: Social Media Icons und spezielle Icons für Applikationen wie den Stadtplan etc.).

Parameter und Anwendung in Nunjucks

# icon(settings) Parameter
settings: "object"
  id: "string" # ID des Icons (siehe /look-and-feel/icons/?icon_cat=uiedv)
  hash: "string" # Random hash, um doppelte id-Attribute zu vermeiden (default: false)
  title: "string" # Alternativtext (default: false)
  class: "string" # (optional) frei wählbare Klasse
  width: "int" # Breite (default: 28)
  height: "int" # Höhe (default: 28)
  hidden: "boolean" # In HTML ausblenden (default: false)
  attributes: "object" # HTML-Attribute (z. B.: width, class,...), frei wählbar
  content: "object"
    attributes: "object" # HTML-Attribute (z. B.: class,...), frei wählbar

# icon(settings) Anwendung
{% from "components/icon/icon.njk" import icon with context %}

{{ icon(settings) }}

# iconText(settings) Parameter
settings: "object"
  icon: "object" # siehe icon Parameter
  style: "string" # zulässige Werte: centered

# iconText(settings) Anwendung
{% from "components/icon/icon.njk" import iconText with context %}

{% call iconText(settings) %}
  Text frei wählbar
{% endcall %}

Variationen

Icon ohne Titel

Ein Icon ohne Titel (ID-Attribut) ist standardmäßig für Screenreader-UserInnen nicht zugänglich.

HTML

Laden…

Nunjucks

Laden…

In eigenem Fenster öffnen

Icon mit Titel (barrierefrei)

Ein Icon mit Titel (ID-Attribut), der die Bedeutung und nicht das Aussehen des Icons vermittelt, ist für Screenreader-UserInnen zugänglich. Zum Beispiel: Ein Taxi-Icon soll den Titel „Taxistand“ und nicht „Auto“ erhalten.