Icons
Für Icons wird das Iconset von Font Awesome v5 free genutzt. Um ein Icon zu verwenden, kann das entsprechende Icon auf der Webseite von Font Awesome herausgesucht und das Markup kopiert werden.
Damit das Icon nicht von Screenreadern vorgelesen wird benötigt es zusätzlich das Attribut aria-hidden="true" und für den Fall, dass es keinen zugehörigen Text gibt einen Span-Tag mit der Klasse aural, der dann vom Screenreader vorgelesen wird.
Die Integrated Default Icons sind fester Bestandteil des CSS und benötigen keine FontAwesome Integration.
Fontawesome Free Icons
Für Icons wird das Iconset von Font Awesome v5 free genutzt. Um ein Icon zu verwenden, kann das entsprechende Icon auf der Webseite von Font Awesome herausgesucht und das Markup kopiert werden.
Example
<i class="fas fa-arrow-right" aria-hidden="true"></i> Bicons (no Fontawesome includes needed)
Als Alternative zur Fontawesome Syntax können einige Icons auch mit .bicon eingefügt werden. Einige wenige Standardicons (arrow, chevron, ...) sind integraler Bestandteil des CSS. Andere werden als lokale svg Dateien geladen.
.bicon.bicon-name_of_icon
Example
<i class="bicon bicon-arrow-right" aria-hidden="true"></i> Icons integrated in CSS:
- bars
- search
- times
- arrow-right
- arrow-left
- arrow-up
- arrow-down
- chevron-right
- chevron-left
- chevron-up
- chevron-down
- universal-access
- leichte-sprache
- dgs
Icons from local svg files:
- external-link
- envelope
- desktop
- phone
- mobile
- fax
- map
- map-marker
- calendar
- clock
- cart
- lock
- lock-open
- edit
- trash
- heart
- user
- login
- logout
- x-twitter
- square-x-twitter
- square-facebook
- square-instagram
- square-whatsapp
- square-xing
- youtube
- square-youtube
- snapchat
- square-snapchat
- printerest
- square-printerest
- square-linkedin
- download
- play
- sliders
- info
- plus
- id-card
- plane
- building
- file
- lightbulb
- gear
- wrench
- triangle-exclamation
- rocket
- landmark
- info-circle
- check
- check-circle
- times-circle
- maximize
- quote-left
- circle-down
Traffic icons
.traffic-icon.traffic-icon-name_of_icon
Example
<i class="traffic-icon traffic-icon-ubahn" title="U-Bahn" aria-label="U-Bahn"></i>- ubahn
- bus
- sbahn
- tram
- faehre
- metrobus
- bahn
Deprecated icons
Misc icons
- Zum Intranet Verweis auf eine Intranet-Seite, die nur aus dem Landesnetz aus erreichbar ist. (Sollte vermieden werden auf Internet-Seiten, da das zu Frust beim Nutzer führen kann).
- Zum Internet Verweis auf eine Internet-Seite.
- Verweis auf ein PDF-Dokument
-
Link zu Landesinhalt
Landesinhalt, Link verweist auf offizielle Landesinhalte.
-
Digital signierte Email
Verweis auf eine E-Mailadresse, die für den Empfang von signierten E-Mail geeignet ist.
-
Tickets / Link zu Kartenverkäufen
-
Audit Beruf und Familie
-
EC-Zahlung
-
Lexikon
-
Appstore Icon von Apple
-
Google Play Icon
-
Leichte Sprache
-
Home Icon
- Gebärdensprache
- Leichte Sprache
