Using Icons in Web Apps

Placing Icons

Using icons is easy! A home icon, is just a <span> with the attributewk-icon="home".

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

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

Changing Styles With SCSS/CSS

Change icon colors with CSS like this:

[wk-icon] {
    color: #007ac3;
}

Change icon size like so:

[wk-icon] {
    font-size: 20px;
}

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

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

Custom Font Face And Base Styles

After you choose and generate an icon font you will need to define your font face and base icon styles.

Using WK SASS Utils it’s easy:

@import 'wk-sass-utils';

// if you have chosen `my-icons` as the Font Name and `my-icon` as the CSS Prefix.

@include wk-font-face('my-icons', 'font/my-icons', map-get($wk-font-weight, regular));

[my-icon] {
    @include wk-icon-base('my-icons');
}

@import 'my-icons-custom-attr-codes';