Icons

Icon font

Icons on the website use a custom icon set which are managed through IcoMoon. This tool makes changes to the icon set easy.

Modifying the icon set

1. Open the IcoMoon app
2. Import the IcoMoon data file located in src/Fonts/klemich-iconfont/selection.json.
3. Makes changes as required
4. Generator and download the font as a zip
5. Unzip the required contents of the icon font into src/Fonts/klemich-iconfont
6. Update the icon variables located in src/Css/Base/variables.scss, using the generated CSS styles,
7. Before deployment, update the cache-busting random hash on the font file imports in src/Css/Base/fonts.scss. This will ensure users load new versions of the icon set rather than from cache

Usage

In Sass

You can target a pseudo-element, which can be populated with a font icon glyph.

1. Include the iconfont-icon Sass mixin, which provides required font styles
2. Using the content property, reference an icon font glyph from the $icons Sass map by using the predefined get function iconfont()

For example:

.your-element:after {

@include iconfont-icon;

content: iconfont("check");

}

In HTML

Much like other icon libraries, you can output icons using only CSS classes on HTML elements.

1. Add the base CSS class .icon to your element. This includes the same required font styles as the iconfont-icon Sass mixin.
2. Add a BEM modifier class to match the name of the desired icon, e.g. .icon--check.

For example:

<span class="icon icon--check"></span>

This will output the icon as a CSS pseudo element on the :before selector. If you require to channel into the :after selector, you can swap out the .icon class for .icon-after.

See the Sass @each loop in src/Css/Base/fonts.scss for a better understanding how this works.