Design

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

16. Juni 2013
von

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: , , ,

3 Kommentare zu „CIKONSS 1.0: Responsive Icons mit purem CSS, die sogar im IE funktionieren
  1. Milana Cap am 16. Juni 2013 um 15:00

    This is wonderful article Dieter. Thank you very much.

    zzap

    • Oink am 17. Juni 2013 um 07:53

      These icons are great. Good work :)

  2. ati am 16. Juni 2013 um 19:05

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

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!