Using Icons in Web Apps

CSS Checklist

Loading CSS assets from the CDN or copying from the dist/ directory when using NPM satisfies this requirement checklist.

Nevertheless, the following steps are explained for cases where one is migrating from legacy icon markup, third party markup, or to use a subset of the full icon collection.

Font face(s)

Name the font family and load the font files directly.

Note: the Web Font Loader can load the font files for you, but ultimately these styles will load.

@font-face {
    font-family: "wk-icons-open";
    font-weight: 400;
    src: url("font/wk-icons-open.eot?") format("eot"),
        url("font/wk-icons-open.woff") format("woff"),
        url("font/wk-icons-open.ttf") format("truetype");
}

Check the browser console to ensure there are no 404 errors when loading the font files.

Base icon style

There is a simple base style for all icons.

[wk-icon] {
    display: inline-block;
    font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1em;
    margin-left: .2em;
    margin-right: .2em;
    speak: none;
    text-align: center;
    text-decoration: inherit;
    text-transform: none;
    width: 1em;
}

[wk-icon]::before {
    font-family: "wk-icons-open";
}

Associate hex codes to icon names

See the hex code column here.

Also, you can reference the complete list of codes in CSS.
```
[wk-icon="star"]::before {
    content: '\e815';
}
```

Placing Icons

Using icons is easy! A home icon, is just a <span> with the attribute wk-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="foo"] {
    color: #007ac3;
}

Change icon size like so:

[wk-icon="baz"] {
    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>

Advanced Topic: Custom Icon Font

You might want to use just a few icons to keep the icon font files and CSS to a minimum size.

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:

// Assume you have chosen `my-icons` as the Font Name and `my-icon` as the CSS Prefix from the Customize tab on the Icon Catalog page.

@import 'wk-sass-utils';

@include wk-font-face('my-icons', 'font/my-icons', map-get($wk-font-weight, regular)); //generate checlist item 1 above

[my-icon] {
    @include wk-icon-base('my-icons'); //generate checklist item 2 above
}

@import 'my-icons-custom-attr-codes'; //generate checklist item 3 above - these codes are found in the zip file of your customized version