Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JavaScript
branch: master
Failed to load latest commit information.
assets Add missing var in demo.js
README.md Initial commit
cikonss.css Fix url's
extra-large-icons.html Fix url's
huge-icons.html Fix url's
index.html Fix url's
large-icons.html Fix url's
license.txt Initial commit
mid-icons.html Fix url's
small-icons.html Fix url's

README.md

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.

Cikonss

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.

Demos

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:

  • general style: .icon (mandatory)
  • the size: .icon-small, .icon-mid, .icon-large, .icon-extra-large, .icon-huge (mandatory)
  • variant: .icon-square, .icon-rounded (optional)

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

License

MIT license

Something went wrong with that request. Please try again.