7 Icons Icons

Icons are generated with grunt grunticon

7.1 Icons - CSS Icons CSS Icons

7.1.1 Icons - CSS Icons - Animate Icon Transform Animate Icon Transform

Animates the transform applied to an icon.

Example 
  1. <span class="icon-chevron animate-icon-transform"></span>

7.1.2 Icons - CSS Icons - Checkmark Icon Checkmark Icon

Show a checkmark icon that respects the current text size and color.

Example 
  1. <span class="icon-checkmark text-charcoal text-small"></span>
  2. <span class="icon-checkmark text-purple"></span>
  3. <span class="icon-checkmark text-magenta text-large"></span>
  4. <span class="icon-checkmark text-pink text-xlarge"></span>

7.1.3 Icons - CSS Icons - Chevron Chevron

A chevron shape.

By default, this is pointing to the upper right. Use ".icon-chevron-up" or ".icon-chevron-down" to change the direction.

Example 
  1. <span class="icon-chevron"></span>

7.1.3.1 Icons - CSS Icons - Chevron - Bold Chevron Bold

Uses a bolder chevron

Example 
  1. <span class="icon-chevron icon-chevron-bold"></span>

7.1.3.2 Icons - CSS Icons - Chevron - Down Chevron Down

Rotates the Chevron icon to be pointing down.

Example 
  1. <span class="icon-chevron icon-chevron-down"></span>

7.1.3.3 Icons - CSS Icons - Chevron - Large Chevron Large

Uses a larger chevron

Example 
  1. <span class="icon-chevron icon-chevron-large"></span>

7.1.3.4 Icons - CSS Icons - Chevron - Left Chevron Left

Rotates the Chevron icon to be pointing left.

Example 
  1. <span class="icon-chevron icon-chevron-left"></span>

7.1.3.5 Icons - CSS Icons - Chevron - Right Chevron Right

Rotates the Chevron icon to be pointing right.

Example 
  1. <span class="icon-chevron icon-chevron-right"></span>

7.1.3.6 Icons - CSS Icons - Chevron - Up Chevron Up

Rotates the Chevron icon to be pointing up.

Example 
  1. <span class="icon-chevron icon-chevron-up"></span>

7.1.4 Icons - CSS Icons - Close Icon Close Icon

Show an "x" close icon that matches the current text size and color.

Example 
  1. <span class="icon-close text-charcoal text-small"></span>
  2. <span class="icon-close text-purple"></span>
  3. <span class="icon-close text-magenta text-large"></span>
  4. <span class="icon-close text-pink text-xlarge"></span>

7.1.5 Icons - CSS Icons - Red Circle X Red Circle X

This is used for form elements, commonly

Example 
  1. <div class="icon-red-circle-x">
  2. <input class="form-control" value=".icon-red-circle-x">
  3. </div>

7.2 Icons - Sizes Icon sizes

Examples
Default styling
icon-s
small icon
icon-m
medium icon
icon-l
large icon
icon
get display attributes 
  1. <div class="[modifier class]" style="background-image: url('http://www.fillmurray.com/50/50');">
  2. </div>