# Documentation

You will find in this document details on how to use our icon font and a list of useful helper classes.

## Add our icon font to your website

1. Copy the entire `pe-icon-7-stroke` directory into your project.
2. In the `<head>` of your html, reference the location to our icon font CSS: pe-icon-7-stroke.css and if needed helper CSS: helper.css.

       <link rel="stylesheet" href="path/to/pe-icon-7-stroke/css/pe-icon-7-stroke.css">

       <!-- Optional - Adds useful class to manipulate icon font display -->
       <link rel="stylesheet" href="path/to/pe-icon-7-stroke/css/helper.css">

## Place the icons in your HTML

pe-7s-map-marker
pe-7s-home

Easiest way is to place your icon inline using a html tag such as `<span>` or `<i>`

    <span class="pe-7s-map-marker"></span> pe-7s-map-marker
    <i class="pe-7s-home"></i> pe-7s-home

icon unicode is added with CSS and the pseudo-class :before.

## Compatible with Icomoon font creator tool

The IcoMoon app lets you build and use your own icon sets: IcoMoon App.
You can import `icomoon/*selection.json*` in the IcoMoon app using the *Import Icons* button (or via Main Menu > Manage Projects) to retrieve this specific icon font.
This way you can mix and match our icon font with other fonts or select only the icons you need and generate a new font.

## Helper classes based on font-awesome useful classes (optional)

Below you will find a list of useful classes to modify the icon display, layout, sizes etc... They come with the helper.css file and are based on a modified version of font-awesome classes. Important: if you already use font-awesome (FA) icon font in your website, you might want to delete the classes in the helper file under `/* FA based classes */` and use the FA classes instead.

### Larger Icons & Vertical Align

pe-7s-map-marker

pe-7s-map-marker

pe-7s-map-marker

pe-7s-map-marker

pe-7s-map-marker

To increase icon sizes relative to their container, use the `pe-lg` (33% increase), `pe-2x`, `pe-3x`, `pe-4x`, or `pe-5x` classes.
To align the icon at the middle of a text, use the `pe-va` class.

    <p><i class="pe-7s-map-marker pe-lg pe-va"></i> pe-7s-map-marker</p>
    <p><i class="pe-7s-map-marker pe-2x pe-va"></i> pe-7s-map-marker</p>
    <p><i class="pe-7s-map-marker pe-3x pe-va"></i> pe-7s-map-marker</p>
    <p><i class="pe-7s-map-marker pe-4x pe-va"></i> pe-7s-map-marker</p>
    <p><i class="pe-7s-map-marker pe-5x pe-va"></i> pe-7s-map-marker</p>

If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height. pe-7s-attention

## Fixed Width Icons

Use `pe-fw` to set icons at a fixed width. Great to use when variable icon widths throw off alignment. Especially useful in things like nav lists. (Reminder: nav list classes in the example are from bootstrap)

    <ul class="nav nav-pills nav-stacked">
      <li class="active"><a href="#"><i class="pe-7s-home pe-fw"></i> Home</a></li>
      <li class="active"><a href="#"><i class="pe-7s-culture pe-fw"></i> Library</a></li>
      <li class="active"><a href="#"><i class="pe-7s-browser pe-fw"></i> Applications</a></li>
      <li class="active"><a href="#"><i class="pe-7s-config pe-fw"></i> Settings</a></li>
    </ul>

## List Icons

- List icons (like these)
- can be used
- to easily replace
- default bullets in lists

Use `pe-ul` and `pe-li` to easily replace default bullets in unordered lists.

    <ul class="pe-ul">
    <li><i class="pe-li pe-7s-star"></i> List icons (like these) </li>
    <li><i class="pe-li pe-7s-angle-right"></i> can be used </li>
    <li><i class="pe-li pe-spin pe-7s-help2"></i> to replace </li>
    <li><i class="pe-li pe-7s-play"></i> default bullets in lists </li>
    </ul>

## Bordered & Pulled Icons

Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

Use `pe-border` and `pull-right` or `pull-left` for easy pull quotes or article graphics.

    <i class="pe pe-7s-chat pe-2x pull-left pe-border"></i>
    Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

## Spinning Icons

Use the `pe-spin` class to get any icon to rotate. Works well with `pe-7s-science`, `pe-7s-refresh`, and `pe-7s-config`.

    <i class="pe-7s-science pe-spin"></i>
    <i class="pe-7s-refresh pe-spin"></i>
    <i class="pe-7s-config pe-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

## Rotated & Flipped

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

To arbitrarily rotate and flip icons, use the `fa-rotate-*` and `fa-flip-*` classes.

    <i class="pe-7s-graph3"></i>&nbsp; normal<br>
    <i class="pe-7s-graph3 pe-rotate-90"></i>&nbsp; pe-rotate-90<br>
    <i class="pe-7s-graph3 pe-rotate-180"></i>&nbsp; pe-rotate-180<br>
    <i class="pe-7s-graph3 pe-rotate-270"></i>&nbsp; pe-rotate-270<br>
    <i class="pe-7s-graph3 pe-flip-horizontal"></i>&nbsp; pe-flip-horizontal<br>
    <i class="pe-7s-graph3 pe-flip-vertical"></i>&nbsp; pe-flip-vertical

## Stacked Icons

pe-7s-graph3 on pe-7s-monitor
pe-7s-gleam on pe-7s-cloud
pe-7s-look on pe-7s-albums
pe-7s-drop on pe-7s-umbrella

To stack multiple icons, use the `pe-stack` class on the parent, the `pe-stack-1x` for the regularly sized icon, and `pe-stack-2x` for the larger icon. `pe-inverse` can be used as an alternative icon color and you can add your own color palette for more variations.

    <span class="pe-stack pe-lg">
      <i class="pe-7s-monitor pe-stack-2x"></i>
      <i class="pe-7s-graph3 pe-stack-1x"></i>
    </span>
    <br>pe-7s-graph3 on pe-7s-monitor<br>
    <span class="pe-stack pe-lg">
      <i class="pe-7s-cloud pe-stack-2x blue"></i>
      <i class="pe-7s-gleam pe-stack-1x yellow"></i>
    </span>
    <br>pe-7s-gleam on pe-7s-cloud<br>
    <span class="pe-stack pe-lg">
      <i class="pe-7s-albums pe-stack-2x"></i>
      <i class="pe-7s-look pe-stack-1x"></i>
    </span>
    <br>pe-7s-look on pe-7s-albums<br>
    <span class="pe-stack pe-lg">
      <i class="pe-7s-umbrella pe-stack-2x red"></i>
      <i class="pe-7s-drop pe-stack-1x blue"></i>
    </span>
    <br>pe-7s-drop on pe-7s-umbrella