640x480.de

Beiträge aus dem Was-mit-Medien-Alltag

Symbolschrift statt Bilddateien

Websites brauchen Icons und Symbole zur besseren Lesbarkeit. Diese wurden bisher direkt als Bild eingebunden bzw. über CSS als Hintergrundbild platziert.

Für die nächste Version unseres CMS verzichten wir auf Bilder für die Darstellung von Symbolen und nutzen stattdessen die Schriften von symbolset.com.

So lassen sich Funktionen wie compose «Neuer Artikel», oder Statusinformationen wie public  «freigegeben» oder locked «gesperrt» sehr einfach darstellen.

Schön ist auch, dass sich alle Symbole ganz einfach farblich anpassen lassen femaleavatar maleavatar – und das einfach per CSS ohne jedes Icon mehrfach vorhalten zu müssen (ja, das geht mit transparenten icons und wechselnden Hintergrundfarben per CSS auch).

Die Symbolschiften finden wir like und haben sie schon ganz in unser love geschlossen.

comment Kommentare

Birgit am 02.04.2013, 20:23:

Font Awesome – designed for use with Twitter Bootstrap, geht aber auch ohne:
fortawesome.github.com [extern]

Birgit am 05.11.2012, 09:34:

Browse and select icons to download them or make a font. You may import SVG images or fonts too: icomoon.io [extern]

Birgit am 28.10.2012, 18:01:

Hier gibt’s auch einen recht umfangreichen Webfont:
kudakurage.com [extern]

Martin am 10.07.2014, 10:13:

Sven Wolfermanns Artikel „SVG Sprites vs. Icon-Fonts“ maddesigns.de [extern] bringt nochmal ein paar neue Aspekte ins Spiel.

Was ich besonders gut finde: die Möglichkeit mehrfarbiger Icons und den direkten Zugriff auf die Quellen zur Modifikation oder Ergänzung weiterer Icons. Man ist dann nicht mehr vom Symbolumfang fertiger Iconfonts abhängig, wo gerade bei der Gestaltung von Backends immer genau das eine wichtige Icon fehlt.