Dieter Petereit June 16th, 2013

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-startpage-550

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:

icon-mail-w550

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.

icon-variants-w550 all icons, all variants in mid-size

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

Dieter Petereit

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.

One comment

  1. It’s really good to see that the icons are created just a few lines of CSS codes. It is even better that icon fonts because we don’t require to include any fonts for rendering these.
    Great stuff!!

Leave a Reply

Your email address will not be published. Required fields are marked *