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?

The new namespace is wk-icon-lt.

WK CSS uses the icon namespace .wk-icon, so you may experience problems when combining icon sets. 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-lt-home.

<span class="wk-icon-lt-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-lt-"],
[class*=" wk-icon-lt-"] {
    color: #007ac3;
}

Change icon size like so:

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

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

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