Für Icons bieten die Komponenten mit der Telekom-Icon eine eigene Schriftart. Diese Icons gibt es in der Variante Solid und Outline
Um das Einbinden der Icons zu vereinfachen, wird außerdem die CSS-Klasse .icon
angeboten. Sie bringt die elementaren Einstellungen für ein Icon mit. Durch die zusätzliche Verwendung der klasse .icon-solid
wird das Icon im Solid Stil angezeigt. Welches Icon verwendet wird, bestimmt eine weitere CSS-Klasse. Unter dem Beispiel sind alle Icons mit Klassenname aufgeführt. Zur Vereinfachung können Icons mit dem <span style=“white-space: nowrap”><i>
-Tag</span> erzeugt werden:
Synchronisieren
<span class="sr-only">Synchronisieren</span> <i class="icon icon-synchronize" aria-hidden="true"></i>
Synchronisieren
<span class="sr-only">Synchronisieren</span> <i class="icon icon-solid icon-synchronize" aria-hidden="true"></i>
**Anmerkung Barrierefreiheit:**
Icons werden von Unterstützungstechnologien oft nicht erkannt oder fehlerhaft
interpretiert. Um das zu vermeiden ist es wichtig `aria-hidden="true"` auf die
Icon-Tags anzuwenden, damit diese für Unterstützungstechnologien nicht
mehr erkennbar werden.
Je nach Fall muss nun eine Alternative gefunden werden. So kann beschreibender Text mit CSS-Klasse `.sr-only` vor das Icon geschrieben werden, welcher dann nur von Unterstützungstechnologien erkannt wird.
Je nach Fall muss nun eine Alternative gefunden werden. So kann beschreibender Text mit CSS-Klasse `.sr-only` vor das Icon geschrieben werden, welcher dann nur von Unterstützungstechnologien erkannt wird.
Varianten
- Hinzufügen Symbol, Klasseicon-add
- Zur Watchlist hinzufügen Symbol, Klasseicon-add-to-watchlist
- Anhang Symbol, Klasseicon-attachment
- Lesezeichen Symbol, Klasseicon-bookmark
- Kalender Symbol, Klasseicon-calendar
- AbbrechenSymbol, Klasseicon-cancel
- Uhrzeit Symbol, Klasseicon-clock
- Cloud Symbol, Klasseicon-cloud
- Kommentar Symbol, Klasseicon-comment
- Computer Symbol, Klasseicon-computer
- Bestätigen Symbol, Klasseicon-confirm
- Kontextmenü Symbol, Klasseicon-context-menu
- Kopieren Symbol, Klasseicon-copy
- Cover Ansicht Symbol, Klasseicon-cover-view
- Verkleinern Symbol, Klasseicon-decrease
- Punkte Symbol, Klasseicon-digits
- download Symbol, Klasseicon-download
- Bearbeiten Symbol, Klasseicon-edit
- Anruf beenden Symbol, Klasseicon-call
- Fehler Symbol, Klasseicon-error
- Export Symbol, Klasseicon-export
- Schnellvorlauf Symbol, Klasseicon-fast-forward
- Favoriten Symbol, Klasseicon-favorites
- Datei Symbol, Klasseicon-file
- Filter Symbol, Klasseicon-filter
- Ordner Symbol, Klasseicon-folder
- Vorwärts Symbol, Klasseicon-forward
- Hilfe Symbol (gerahmt), Klasseicon-help
- Hilfe Symbol, Klasseicon-help_2
- Home Symbol, Klasseicon-home
- Import Symbol, Klasseicon-import
- Info Symbol (gerahmt), Klasseicon-information
- Info Symbol, Klasseicon-information_2
- IPTV Symbol, Klasseicon-iptv
- Verknüpfung Symbol, Klasseicon-link
- Listenansicht Symbol, Klasseicon-list-view
- Ladezustand Symbol, Klasseicon-loading-indicator
- Vorhängeschloss Symbol, Klasseicon-lock
- Anmeldung Symbol, Klasseicon-login
- Mitteilung Symbol, Klasseicon-message
- Mikrophonständer Symbol, Klasseicon-microphone-socket
- Mehr Symbol, Klasseicon-more
- Papierkorb Symbol, Klasseicon-move-to-trash
- Mein Profil Symbol, Klasseicon-my-profile
- Navigation runter Symbol, Klasseicon-navigation-down
- Navigation links Symbol, Klasseicon-navigation-left
- Navigation richts Symbol, Klasseicon-navigation-right
- Navigation hoch Symbol, Klasseicon-navigation-up
- Nächster Titel Symbol, Klasseicon-next
- Pause Symbol, Klasseicon-pause
- Abspielen Symbol, Klasseicon-play
- Vorheriger Titel Symbol, Klasseicon-previous
- Drucken Symbol, Klasseicon-print
- Aufnahme Symbol, Klasseicon-record
- Neu laden Symbol, Klasseicon-reload
- Antworten Symbol, Klasseicon-reply
- Zurückspulen Symbol, Klasseicon-rewind
- Klingelton aus Symbol, Klasseicon-ringtone-off
- Klingelton an Symbol, Klasseicon-ringtone-on
- Nach links scrollen Symbol, Klasseicon-scroll-left
- Nach rechts scrollen Symbol, Klasseicon-scroll-right
- Suchen Symbol, Klasseicon-search
- Einstellungen Symbol, Klasseicon-settings
- Teilen Symbol, Klasseicon-share
- Einkaufswagen Symbol, Klasseicon-shopping-cart
- Zum Ende springen Symbol, Klasseicon-skip-to-end
- Zum Anfang springen Symbol, Klasseicon-skip-to-start
- Smartphone Symbol, Klasseicon-smartphone
- Lautsprecher aus Symbol, Klasseicon-speaker-off
- Lautsprecher an Symbol, Klasseicon-speaker-on
- Anrufen Symbol, Klasseicon-start-call
- Stop Symbol, Klasseicon-stop
- Erfolg Symbol, Klasseicon-success
- Synchronisieren Symbol, Klasseicon-synchronize
- Tablet PC Symbol, Klasseicon-tablet-pc
- Telekom Symbol, Klasseicon-telekom-1T1
- Minimieren Symbol, Klasseicon-minimize
- Maximieren Symbol, Klasseicon-maximize
- Kachelansicht Symbol, Klasseicon-tile-view
- upload Symbol, Klasseicon-upload
- Warnung Symbol (gerahmt), Klasseicon-warning
- Warnung Symbol, Klasseicon-warning_2
- Ansicht vergrößern Symbol, Klasseicon-zoom-in
- Ansicht verkleinern Symbol, Klasseicon-zoom-out