Icons

This design system generates it's own icon fonts for efficiency. The idea being that this site will not require all 100+ icons typically included with the most popular libraries such as font-awesome; so we just take what we need.

See all available icons

The set-up

The fonts are compiled using icon-font-generator, this has been configured to capture any *.svg files within the icons folder at the root of this project.

Font files

Font files are then generated as .eot, .svg, .ttf, .woff and.woff2. These files are output within the fonts folder; however, they should not be committed to the repo as they are generated on build.

Styling

The relevant styling for icons gets generated and added to the non-essential.css file for use on the website. The convention behind the icon class names is typically the filename prefixed with .icon-; for example search.svg becomes .icon-search.

Using icons

As is convention with icons, they should be wrapped using <i class="icon-..."></i>.