Using Icons in Web Apps

We’re close to releasing version 1.0, but this is an experimental release. User beware: there may be some changes in filenames and content.

Using WK CSS 0.x Icons Already?

WK CSS uses the icon namespace .wk-icon already, so you may experience problems when using these icons in conjunction. These issues will be resolved before the 1.0 release. You have been warned.

Placing Icons

Using icons is easy! A home icon, is just a <span> with the class .wk-icon-home.

<span class="wk-icon-home"></span>

For a complete reference of icon names, see the catalog.

Changing Styles With CSS

Change icon colors with CSS like this:

[class^="wk-icon-"],
[class*=" wk-icon-"] {
    color: #007ac3;
}

Change icon size like so:

[class^="wk-icon-"],
[class*=" wk-icon-"] {
    font-size: 20px;
}

Want to make something spin? Just add the .wk-spin class from WK CSS.

<span class="wk-icon-spinner wk-spin"></span>