CIKONSS 1.0: Responsive Icons In Pure CSS, IE Doesn’t Fail

Icons based on PNG, GIF or JPG are nothing new. Relatively new is the way to store all icons in one single PNG and access them via CSS, the so-called sprites. Even more interesting is the complete omission of file-based structures using nothing but pure CSS. CIKONSS does just that. And as these symbols are based on CSS2, even Internet Explorer 8 supports them.

CIKONSS: Zzapped Up by Milana

Milana Cap from Serbia looks back at five years of experience in web design. She is better known under her nickname zzap, which reveals how her last name is to be pronounced. Besides zzapping up web projects, she is a classical musician at the Serbian National Theater. It is obvious, Milana loves fine arts. She says of herself that everything she knows about the web and how to create it, was taught to her by the Open Source community. CIKONSS is an attempt to give something back. In my humble opinion, this attempt proves successful.

CIKONSS: 43 Icons in Various Sizes and Shapes

As CIKONSS are based on CSS2, there is an immanent lack of variation. On the upside they do work flawlessly in browsers that are not known for extensive CSS support, most notably Internet Explorer. Milana created 43 icons, all of which are associated to UI design. Each icon comes in five sizes and three variants.

Embedding CIKONSS into your own website is simple. Assuming that you downloaded the CSS from Github and reuploaded it to your own web space, this is the next step. In the head of your document you write:

Combining different classes, we place the icons wherever we see them fit. This is how it happens:

The result would be:

Each icon gets defined through a combination of two span elements. The first span consists of the class icon, combined with a size selector, such as icon-mid to show a mid-sized symbol. The second class is mandatory. The second span defines the actual icon, which in our example is an envelope symbolizing mail, as such icon-mail.

Inside the first span we could attach a third parameter for the definition of a variant. If we don't add that third class, icons will be shown without surrounding frames. We could as well choose variants with a squared or rounded frame. Would we want to do this, we'd add icon-square or icon-rounded respectively.

The icon size can easily be adjusted, if need be. They are all based on em. For mid-sized icons the default definition is as follows:

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

CIKONSS 1.0 can be downloaded from Github and its corresponding demo-website. CIKONSS is completely free of charge and can be used in personal and commercial projects alike as it comes with the very liberal MIT license attached. The project is a mere two weeks young. So, get it while it's hot...

Related Links

• Pure CSS Responsive Icons - IE friendly | CIKONSS 1.0
• CIKONSS on Github | zzap / Cikonss
• Milana Cap aka zzap on G+ | Google+ Account