Icons

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 <i>-Tag 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.

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-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