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)

Hinweis

Das Iconset .bicons befindet sich aktuell in der Testphase!

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
  • print
  • edit
  • trash
  • heart
  • user
  • login
  • logout
  • x-twitter
  • square-x-twitter
  • facebook
  • square-facebook
  • instagram
  • square-instagram
  • whatsapp
  • square-whatsapp
  • xing
  • square-xing
  • youtube
  • square-youtube
  • snapchat
  • square-snapchat
  • printerest
  • square-printerest
  • linkedin
  • 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

Deprecated

Dont use following icons anymore. The pre 2021 Markup was generated with Imperia iconsyntax and will not be supported in the future.

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 Lexikon
  • Appstore Icon von Apple
  • Google Play Google Play Icon
  • Leichte Sprache Link zu einer anderen Sprache: Leichte Sprache
  • Home Icon Home
  • Gebärdensprache
  • Leichte Sprache