Website: Iconsets

Auf dieser Seite werden Iconsets vorgestellt und deren Verwendung dokumentiert.

Komplette Icon-Referenz

Icons werden über sogenannte semantische Klassennamen angesprochen. In dieser Form der Benutzung bleiben die eigentlichen Grafikdateien austauschbar.

Listen

Allgemeine verfügbare Icons

Kombinatoren (überlagernde Zeichen)

Beispiele: Icons kombiniert mit überlagerten Zeichen

Beispiele: Icons mit beliebigen Zeichen überlagern

Sie können mit den Attributen data-before oder data-content beliebige Zeichen den Icons überlagern.

Workshop SVG Spritemap

Sie können in diesem Abschnitt ein Iconset ändern. Sie können sowohl die Datei gui.svg ändern als auch die zugehörigen CSS-Definitionen.

Ein paar Erklärungen zum Aufbau der SVG-Datei.

Auf diese Weise kann die Dateigrösse auf ca. 250B / Symbol gehalten werden.

Iconset gui.svg

Aufrufen und speichern:
Für helle Themes: gui.svg
Für dunkle Themes: gui_dark.svg

Experimentieren Sie mit dem SVG

Testen Sie ein einzelnes Symbol

Ausgabe: klein: grösser:

<span ></span>

CSS Icon Definitionen

Passen Sie die Icon-Definitionen im CSS an.

Bekannte Probleme