Icons

The template includes a complete icon set from the awesome icon font Entypo, with 122 available symbols:

Icon fonts are vectors, so they may take any desired size and color, are resolution-independant and can even receive a drop-shadow:

Markup

Icons are created using classes, either on an empty element or on an existing one:

<!-- Empty element -->
<span class="icon-star"></span> Text outside

<!-- Existing element -->
<span class="icon-star">Text inside</span>

When applied to an existing element, the icon class will add the necessary margin.

Styling

Icons inherit from the text color and size, and there is a set of color classes dedicated to icons:

class="icon-white", class="icon-silver", class="icon-grey", class="icon-anthracite", class="icon-black", class="icon-red", class="icon-orange", class="icon-green" and class="icon-blue"

There are 5 icon sizes: the default one, and four larger (see example above):

Block icons

Paragraphs and blocks can have a side icon for additional visual information.

For RTL version, use right-icon.

class="left-icon icon-info-round icon-blue"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

class="big-left-icon icon-user icon-green"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

class="huge-left-icon icon-calendar icon-grey"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.