Design

CIKONSS 1.0: Responsive Icons mit purem CSS, die sogar im IE funktionieren

16. Juni 2013

Icons auf der Basis von PNG, GIF oder meinetwegen auch JPG sind nichts neues. Neuer ist die Vorgehensweise, PNG-Icons in einer Datei als sog. Sprites zu versammeln, um so einiges an Requests zu sparen. Noch interessanter ist es aber, Icons nur mit purem CSS zu erstellen und so auf Overhead komplett zu verzichten. CIKONSS setzen diesen Gedanken um, wobei sie ungewöhnlicherweise auf CSS2 basieren. Auf diese Weise funktionieren die Symbole sogar im Internet Explorer 8.

cikonss-startpage-550

CIKONSS: Und es hat Zzap gemacht

Milana Cap aus Serbien arbeitet seit 5 Jahren als Webdesignerin unter dem Namen Zzap. Daneben ist sie klassische Musikerin am serbischen Nationaltheater. Man kann sicher sagen, dass ihr sehr um die schönen Künste gelegen ist. Von sich selbst sagt sie, dass sie alles, was sie heute über das Web weiß und kann, von der Open Source Community gelernt hat. Das Projekt CIKONSS hat sie aufgelegt, um eben dieser Community etwas zurück zu geben. Meiner Meinung nach ist dieser Versuch durchaus als gelungen zu bezeichnen.

CIKONSS: 43 Icons in unterschiedlichen Größen und Formen

Da die CIKONSS auf CSS2 basieren, sind sie hinsichtlich ihrer Vielfalt etwas eingeschränkt, funktionieren dafür browser-übergreifend, insbesondere auch im ansonsten stets etwas widerspenstigen Internet Explorer. Milana Cap erstellte insgesamt 43 Icons, die allesamt dem UI-Design zuzurechnen sind. Jedes Icon steht in fünf Größen und drei Stilen zur Verfügung.

Die Einbindung in die eigene Website ist simpel. Ich gehe davon aus, dass Sie sich die CIKONSS von Github heruntergeladen und wieder auf Ihren Webspace hochgeladen haben. Nun binden Sie sie wie folgt ein:

<link rel="stylesheet" href="css/cikonss.css" />

Unter Verwendung der Kombination verschiedener Klassen platzieren Sie nun die Icons an beliebiger Stelle Ihrer Website. Das kann zum Beispiel so passieren:

1
<span class="icon icon-mid"><span class="icon-mail"></span></span>

Im Ergebnis sähe das dann so aus:

icon-mail

Jedes Icon wird über die Kombination zweier Span-Elemente definiert. Das erste Span besteht aus der Angabe der Klasse icon, eventuell in Kombination mit einer Größenangabe wie icon-mid für ein Symbol mittlerer Größe. Das zweite Span definiert dann das eigentliche Symbol, in unserem Beispiel einen Briefumschlag als Icon für Mail, hier icon-mail.

Innerhalb des ersten Span kann als dritter Parameter noch ein Stil angegeben werden. Unterbleibt die Angabe, erscheinen die Icons ohne umgebenden Rahmen. Will man die Symbole indes mit einem quadratischen oder runden Rahmen versehen, würde man icon-square oder icon-rounded hinzufügen.

icon-variants
Alle zur Verfügung stehenden Stile

Die definierten Größen der Symbole sind im mitgelieferten CSS einfach anzupassen, so man das möchte. Sie basieren auf em. Für die Icons mittlerer Größe sieht die Standarddefinition so aus:

1
2
3
.icon-mid {
    font-size: 2em;
}

CIKONSS 1.0 steht auf Github, wie auch auf der Projektwebsite zum kostenlosen Download bereit. Es kann unter der MIT-Lizenz sowohl für persönliche, wie auch kommerzielle Zwecke frei eingesetzt werden. Das Projekt ist knappe zwei Wochen alt, also noch ganz frisch. Get it while it’s hot…

Links zum Beitrag

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , , ,

Kommentar hinzufügen

Diese E-Mail ist schon registriert. Bitte benutzen Sie die Login-Form oder geben Sie andere ein.

Sie haben nicht korrektes Login und Passwort eingegeben

Entschuldigen, aber Sie müssen zugriffen, um das Kommentar zu schreiben.

3 Kommentars

chronologisch
nach der Bewertung zuerst neue chronologisch
1

This is wonderful article Dieter. Thank you very much.



zzap

2

These icons are great. Good work :)

3

Tolle Sache. Mit Können und Phantasie lässt sich mit aktuellen Technologien mehr realisieren als manche ahnen. Danke!