Icons available

icon--instagram
icon--linkedin
icon--mail
icon--menu
icon--twitter

How to use icons

In HTML

Add the class: `icon--name-of-icon` like this: `icon--arrow-down`. So

<i class="icon--search">Search</i>
becomes Search

In Sass, as a psuedo selector

Use the mixin `icon` with the argument of the icon name like this: `@include icon(facebook);`. So

HTML

<div class="demo-random-icon">Random icon here</div>

CSS

.demo-random-icon {
    @include icon(facebook);
}

becomes

Random icon here.

In Sass, as a text-replacement

This may be more familiar for those coming from image sprites. Use the mixin `icon` with the argument of the icon name plus "$text-replace: true" as an argument: `@include icon(twitter, $text-replace: true);`. So

HTML

<div class="demo-text-replace-icon">This text will be gone</div>

CSS

.demo-text-replace-icon {
  @include icon('twitter', $text-replace: true);
  height: 16px;
  width: 16px;
}
becomes
This text will be gone

You're responsible for height, width, positioning, etc.

Adding and generating icons

SVG files added to `source/images/icons/src/` while running `grunt` are automatically added to the font face. To manually compile icon fonts, run `grunt icons-build`.

Files of note

  1. images/icons/icon-font-template.ai: 512px x 512px Adobe Illustrator template that each font should fit within. Export as SVG from this template at full 512px size.
  2. scss/00-config/_icons.scss: Defines variables used for icons
  3. scss/10-base/_icons-base.scss: Defines mixins used
  4. scss/30-global/_icons-application: Generates the starting CSS styles for default .icon--something elements