Usage

Include cikonss.css file in the head of your html file, like so:

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

Now you can simply choose out of 43 icons, 5 sizes and 3 variants. An icon is made of two <span> elements. Parent element defines: 

<span class="icon icon-small icon-square">...</span>

Child element is the actual icon - available classes are in preview section. Mandatory code for an icon would look like this:

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

The code above produces:

Variants are optional:

<span class="icon icon-small icon-square"><span class="icon-mail"></span></span>

The code above produces:

Examples

Small icons
.icon-small {
    font-size: 1em;
}

View all variants of small icons

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

View all variants of mid icons

Large Icons
.icon-large {
    font-size: 4em;
}

View all variants of large icons

Extra Large Icons
.icon-extra-large {
    font-size: 8em;
}

View all variants of extra large icons*

* these are way too large for screens under 480px width.
Huge Icons
.icon-huge {
    font-size: 12em;
}

View all variants of huge icons*

* these are way too large for screens under 550px width.

About

What are Cikonss?

Cikonss are created in order to be pure CSS, responsive and cross-browser usable. By "cross-browser" I mean IE8 as well. This means that CSS2 is in use which leads to limited shapes (and icons) available.

Some of icons do have border-radius property but this is mainly for fine styling in browsers that supports this property. This doesn't effect in loosing the shape of the icon.

Why have I done this?

Well, this was an experimental idea. I like to use css instead of images and graphics whenever it is possible.

It's a kind of fetish..

Then again, I like to have the smallest possible amount of media queries in css files. Playing with css responsive icons seemed like the next logical step.

Again, why have I done this?

Everything I know about web, more or less, I have learned from wonderful open source community. This is a very humble attempt to give something back.

I hope you'll enjoy using Cikonss at least as much I enjoyed crafting them.

Cheers!

Who am I?

I'm a professional classical musician, a webdesign-css-html-jQuery-php-cms lover. In general, web fascinates me and completely fulfils my need for constant learning and experimenting with art and mathematics.

My name is Milana Cap but you can find me on web usually as "zzap". If you are coming from English speaking area then you have pronounced my last name very wrong. Hence "zzap".