Styles Icons

Für Icons wird ausschließlich die Bibliothek Glyphicons Pro in der Version 2 benutzt. Es werden keine WebFonts, wie in den Glyphicon-Vorgängerversionen benutzt, sondern SVG-Dateien. Für jedes benötigtes Icon, wird eine SVG-Datei als statischer Content bereitgestellt. Dieses Verfahren hat den Vorteil, dass im Gegensatz zu den WebFonts, viel weniger Daten an den Browser übertragen werden müssen. SVG-Datein sind viel kleiner im Vergleich zu WebFonts und es werden nur die benötigten Grafiken übertragen. Größe und Farben werden über CSS zugewiesen (font-size, color). Siehe hierzu auch: https://css-tricks.com/icon-fonts-vs-svg/

Glyphicons Pro 2.0

Die Glyphicons kommen in zwei verschiedenen Größen: Basic und Halflings. Der Halflingssatz wird im Bereich bis 16px verwendet, der Basic Satz darüber.

Die Icons sollte überwiegend aus dem Halflings-Satz stammen, da die Icons in der Regel eher mit geringen Ausmaßen verwendet werden. Bei der Verwendung der Icons sollte die empfohlene Spationierung des Autors beachtet werden.

Sie besteht aus:

1. Icon's body - Volle Größe: 24x24 px - Halflings: 16x16 px
2. Icon's max size - Volle Größe: 32x32 px - Halflings: 20x20 px
3. Icon's white space - Volle Größe: 48x48 px - Halflings: 32x32 px

Die Ränder sind für andere Größen entsprechend ihrem Verhältnis zu skalieren. Das obige Beispiel verwendet 24px. Der Halflingssatz verwendet 16px für den Icon Body, 20px für die Max Größe und 32px für den Whitespace.

Es wird die Einbettung als "CSS background image" empfohlen.

Beispiel:

.smiley { 
    width: 32px; 
    height: 32px; 
    background: url(glyphicons-smileys-1-grinning.svg) center center no-repeat; 
}
    

Die Standardfarbe der SVG-Dateien ist schwarz. Zum Einfärben kann die SVG-Datei editiert werden. Das Einfärben des Backgrounds über CSS ist nicht möglich.

Die folgenden Icons aus dem Basic Set und den Halflings werden verwendet:

Pfeile

Die erste Gruppe der Chevrons wird zum Aufklappen und Verstecken von Informationen benutzt.

Beispiel: Nachrichten-Thread aufklappen im Postfach.

Ihre Funktion ist ähnlich zum "+" und "-" Zeichen beim Akkordion.

OSI File-Icons XS

OSI File-Icons

OSI File-Icons LG

OSI File-Icons XL

Glyphicons

Halflings SASS Aktuell

Flag Icons

Das UISystem stellt alle Länderflaggen zur Verfügung. Die Vewerndung erfolgt über den ISO 3166-1-alpha-2 Code.

xx durch ISO 3166-1-alpha-2 Code ersetzen.

Social Icons SASS Aktuell