Source: https://hilfe.studip.de/develop/Style/Icons
Timestamp: 2018-12-14 19:11:32+00:00

Document:
1. Gestaltung
2. Icon-Rollen
3. Rollen
Icon::ROLE_INFO black Alte Beschreibung: Diese Icons werden ausschließlich in den Infoboxen verwendet und sind nie klickbar. Sie erläutern grafisch die Aktionen, die die Infobox anbietet. So können hier Aktionen mit dem zugehörigen Icon gezeigt werden, Informationen mit einem "I" illustriert werden oder Verweise auf andere Systembereiche mit den zu diesen Bereichen passenden Icons ergänzt werden.
Icon::ROLE_CLICKABLE blue Alte Beschreibung: Die blauen Icons sind der Standard für alle klickbaren Icons, unabhängig davon, in welchem Kontext sie verwendet werden (Ausnahme: Übersicht "Meine Veranstaltungen"). Insbesondere freistehende Aktionen sollten immer neben dem Linktext ein solches Icon zeigen.
Icon::ROLE_ACCEPT green Alte Beschreibung: Grün kommt nur in dem Fall, dass der Bestätigungs-Haken gezeigt wird, zum Einsatz.
Icon::ROLE_STATUS_GREEN green Alte Beschreibung: Grün kommt nur in dem Fall, dass der Bestätigungs-Haken gezeigt wird, zum Einsatz.
Icon::ROLE_INACTIVE grey Alte Beschreibung: Diese Variante kommt zum Einsatz, wenn Icons nicht klickbar sind und nicht innerhalb von Infoboxen eingesetzt werden. Sie drücken auch oft einen Status aus und werden für alle Objekte wie News, Votings oder Dateien verwendet, um ein solches Objekt zu klassifizieren. Eine Ausnahme bildet "Meine Veranstaltungen". Auch hier drücken die grauen Icons einen Zustand aus ("nur bekannte Objekte eines Types") aber können trotzdem geklickt werden, da von hier aus auch die jeweiligen Bereiche direkt angesprungen werden können. Dieser Sonderfall gilt jedoch nur für "Meine Veranstaltungen"
Icon::ROLE_NAVIGATION lightblue
Icon::ROLE_NEW red Alte Beschreibung: Die Farbe Rot dient dazu, Neues darzustellen oder hervorzuheben. Rote Icons kommen auf "Meine Veranstaltungen" zum Einsatz, wenn einer der Bereiche einer Veranstaltung für den Nutzer neue Inhalte führt. Aus Gründen der barrierearmen Bedienung reicht die rote Färbung allein nicht aus, es muss immer auch der Zusatz "neu" verwenden werden, um dem Icon auch eine eindeutige Form zu geben, es sei denn, die Kombination von Farbe und Form des Icons selbst ist eindeutig (etwa ein rotes X).
Icon::ROLE_ATTENTION red Alte Beschreibung: Die Farbe Rot dient dazu, Neues darzustellen oder hervorzuheben. Rote Icons kommen auf "Meine Veranstaltungen" zum Einsatz, wenn einer der Bereiche einer Veranstaltung für den Nutzer neue Inhalte führt. Aus Gründen der barrierearmen Bedienung reicht die rote Färbung allein nicht aus, es muss immer auch der Zusatz "neu" verwenden werden, um dem Icon auch eine eindeutige Form zu geben, es sei denn, die Kombination von Farbe und Form des Icons selbst ist eindeutig (etwa ein rotes X).
Icon::ROLE_STATUS_RED red Alte Beschreibung: Die Farbe Rot dient dazu, Neues darzustellen oder hervorzuheben. Rote Icons kommen auf "Meine Veranstaltungen" zum Einsatz, wenn einer der Bereiche einer Veranstaltung für den Nutzer neue Inhalte führt. Aus Gründen der barrierearmen Bedienung reicht die rote Färbung allein nicht aus, es muss immer auch der Zusatz "neu" verwenden werden, um dem Icon auch eine eindeutige Form zu geben, es sei denn, die Kombination von Farbe und Form des Icons selbst ist eindeutig (etwa ein rotes X).
Icon::ROLE_INFO_ALT white Alte Beschreibung: Die weiße Variante wird immer dann verwendet, wenn Icons innherhalb einer dunklen Umgebung (in der Regel die Kopfzeile von frei schwebenden Fenstern mit dunkelblauer Zeile) vewendet werden. Auch graue Tabellenköpfe erhalten ggf. weiße Icons. In der Regel sind diese nicht klickbar. Das weiße Icon kann auf weißem Hintergrund nicht gesehen werden.
Icon::ROLE_SORT yellow Alte Beschreibung: Gelbe Icons werden ausschließlich zum Verschieben von Objekten benutzt. Daher existieren in diesem Set auch nur Dreiecke und Pfeile in allen Varianten.
Icon::ROLE_STATUS_YELLOW yellow Alte Beschreibung: Gelbe Icons werden ausschließlich zum Verschieben von Objekten benutzt. Daher existieren in diesem Set auch nur Dreiecke und Pfeile in allen Varianten.
4. Zusätze
Zusätze an Icons werden ab Stud.IP v3.4 über die Icon-API referenziert. Möchte man zB ein seminar-Icon als Link mit dem Zusatz add (also Hinzufügen) einbauen: Icon::create('seminar+add')
accept Akzeptieren: Der Haken drückt aus, dass hier eine Bestätigung im Kontext des Objekts dargestellt wird.
add Hinzufügen: Das Plus-Zeichen drückt aus, dass hier ein neues Objekt erzeugt werden kann. Das Anlegen eines Objektes oder der Sprung auf einen Bereich, in dem das Anlegen möglich ist, wird mit diesem Zusatz belegt. Er kann an blauen Icons mit Klick oder schwarzen und grauen Icons verwendet werden.
decline Aktion gesperrt: Zuweilen werden Aktionen als "nicht möglich" dargestellt. In diesem Fall erhalten die Aktions-Icons ein X als Zusatz.
edit Bearbeiten: Der Stift an einem Objekt drückt aus, das mit einem Klick auf dies Icon ein Objekt bearbeitet werden kann.
export Exportieren: Über dieses Icon werden ein oder mehrere Objekte des entsprechenden Types exportiert (z. B. als CSV-Datei)
move_right Verschieben: Um ein Objekt zu verschieben, gibt es den Zusatz eines Pfeils. Bis zur Version 2.4 waren diese Zusätze gelb, seit der Version 2.5 sind alle Zusätze in rot zu halten.
new Neu: Das Sternchen drückt einen neuen Inhalt aus. Das Sternchen wird (außer in der Kopfzeile) mit einem roten Icon kombiniert.
remove Löschen/Entfernen: Mit einem Minus wird die Möglichkeit, das entsprechende Objekt zu löschen, markiert.
visibility-visible Sichtbar: Ein Objekt wird bei Klick auf dieses Icon sichtbar geschaltet.
visibility-invisible Unsichtbar: Ein Objekt wird bei Klick auf dieses Icon unsichtbar geschaltet.
5. Größen
6. Verzeichnisstruktur
7. Liste der verfügbaren Icons
7.1 Stammicons
(In vielen Fällen existieren sowohl gefüllte und transparente bzw. invertierte Varianten zu einem Stammicon. Hier ist in der Regel die normale Version und nicht die Alternative einzusetzen.)
52a-stopp Lizenz nach §52a Dokument-Weitergabe im Rahmen der alten §52a Lizenz, Variante Stoppschild (wird nicht mehr verwendet)
52a-stopp2 Lizenz nach §52a Dokument-Weitergabe im Rahmen der alten §52a Lizenz, Variante Stoppschild, Alternative (wird nicht mehr verwendet)
52a Lizenz nach §52a Dokument-Weitergaben im Rahmen der alten §52a Lizenz (wird nicht mehr verwendet)
52a2 Lizenz nach §52a Dokument-Weitergabe im Rahmen der alten §52a Lizenz (wird nicht mehr verwendet)
60a Lizenz nach §60a Dokument-Weitergabe im Rahmen der §60a Lizenz (aktuell)
CC Lizenz nach CC Dokument-Weitergabe im Rahmen von CC
license Lizenz allgemein
own-license Eigene Lizenz Dokument-Weitergabe im Rahmen einer eigenen Lizenz/selbst erstellt
public-domain Freie Lizenz Dokument-Weitergabe im Rahmen einer freien Lizenz
action Aktionsmenu Icon zur Initiierung bzw. Verankerung des Aktionsmenu
add-circle-full Hinzufügen für Popover, Variante
admin Administration Alle Administrationen des Systems
cellphone Telefon/Handy Telefonnummer, Smartphone usw.
chat Chat Chat/Forum/Messenger)
chat2 Chat Chat/Forum/Messenger
check-circle-full Akzeptieren/akzeptiert für Popover, Alternative
checkbox-indeterminate uneindeutige Checkbox Checkbox in Form eines Icons, uneindeutig (für Mehrfachselektion)
cloud Cloud-Service generisches Icon für Cloudservices
cloud2 Cloud-Service generisches Icon für Cloudservices, Alternative
computer Computer allgemeines Icon für Computer (analog zu Telefon/Smartphone)
crop Beschneiden Beschneiden von Bildern (zB. Avatar-Bilder)
date-single Einzeltermin
date-cycle regelmäßiger Termin
date-block Blocktermin
decline-circle ablehnen Ablehnen-Variante im Kreis
decline-circle-full ablehnen Ablehnen-Variante im Kreis, Alternative
doctoral-cap Prüfungen/Abschlüsse allgemeines Icon für Prüfungen
door-enter2 Login/Betreten Alternative
door-leave Logout/Verlassen Alternative
download DownloadAlternative
dropbox Cloud-Service DropboxAlternative
eportfolio ePortfolio-Icon
exclaim-circle Hinweis für Popover, Alternative
file Dokument Alternative
files Dokumente/Dateibereich Alternative
file-sound Audio-Datei Alternative, zB. für laute Audiodateien
file-excel Excel-Dokument
file-word Word-Dokument
file-ppt PPT-Dokument
filter Suchfilter, Ansichtsfilter
filter Suchfilter, Ansichtsfilter Alternative
folder-broken nicht erreichbarer Ordner
folder-broken nicht erreichbarer Ordner Alternative
folder-date-full gefüllter Terminordner
folder-date-full2 gefüllter Terminordner Alternative
folder-date-empty leerer Terminordner
folder-date-empty2 leerer Terminordner Alternative
folder-edit-empty leerer editierbarer Ordner
folder-edit-empty2 leerer editierbarer Ordner Alternative
folder-edit-full voller editierbarer Ordner
folder-edit-full2 voller editierbarer Ordner Alternative
folder-empty leerer Ordner Alternative
folder-full gefüllter Ordner Alternative
folder-group-empty leerer Gruppenordner
folder-group-empty2 leerer Gruppenordner Alternative
folder-group-full gefüllter Gruppenordner
folder-group-full2 gefüllter Gruppenordner Alternative
folder-home-empty leerer Home-Ordner
folder-home-empty2 leerer Home-Ordner Alternative
folder-home-full gefüllter Home-Ordne
folder-inbox-full gefüllter Inbox-Ordner
folder-inbox-empty leererInbox- Ordner
folder-lock-full gefüllter geschützter Ordner
folder-lock-full2 gefüllter geschützter Ordner Alternative
folder-lock-empty leerer geschützter Ordner
folder-lock-empty2 leerer geschützte Ordner Alternative
folder-topic-empty leerer Themenordner
folder-topic-full gefüllter Themenordner
forum Forum Alternative
globe Globus/Weltkarte
group3 Gruppe/Hierarchie Gruppen/Hierarchie
hamburger Hamburger-Menu für mobile Ansicht
info-circle-full Information für Popover, Alternative
infopage Freie Infoseite, Alternative
item Allgemeines Objekt für Kommentare Kommentarobjekt
knife Taschenmesser/Tool alternative für Tool-Icon
link2 externer Link Alternative, rechts-orientierte Seiten
link3 externer Link Alternative, links-orientierte Seiten
literature Literatur Alternative
maximize Maximieren für Widgetsystem
news Ankündigungen Ankündigungen, Alternative
notification Notifikation Notifikation
notification2 Notifikation Notifikation, Alternative
outer-space Planet/Weltallt ungenutztes Icon, frei zur Nutzung
phone Telefon klassisches Telefon, abgegrenzt von Handy
plugin Plugin Allgemeines Icon für Plugins
powerfolder Clound-Dienst Powerfolder
question-circle-full Frage für Popover, Alternative
rescue Support/Hilfe Alternative
rotate-left Bildbearbeitung drehen links
rotate-right Bildbearbeitung drehen rechts
remove-circle Entfernen für Popover
remove-circle-full Entfernen für Popover, Alternative
service Support/Service
settings2 Einstellungen Alternative für Einstellungen
share Teilen/Exportieren allgemeines Icon für das Teilen von Objekten
tan2 TAN Vergabe, Nutzung von TANs, Prüfungen, Alternative
upload2 Upload Alternative
video2 Video Videokonferenzen, Alternative
visibility-checked Sichtbarkeit an Umschalter Sichtbarkeit: an, Alternative
wizard Assistent Icon für Assistenten
zoom-in Zoom in Zoomen für Bildupload
zoom-in2 Zoom in Zoomen für Bildupload, Alternative
zoom-out Zoom out Zoomen für Bildupload
zoom-out2 Zoom outZoomen für Bildupload, Alternative
7.2 Play Pause und Stop
7.3 Listen und Pfeile
8. Tools und Bausätze
9. Icons in Retina
Letzte Änderung am 12.12.2018 20:36 Uhr von eludwig.

References: §52
 §52
 §52
 §52
 §52
 §52
 §52
 §52
 §60
 §60