FontAwesome

Raleway comes preinstalled with FontAwesome icon font. FontAwesome features 439 icons for you to use however you please. And is just one of the 3 icon font sets we offer, totaling in over 1000+ icons.

You can place FontAwesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (FontAwesome's makers recommend the <i> tag for brevity, but using a <span> is more semantically correct). Which is what I do in this theme.

This icon set also offers some awesome extra features, you can use as well. You can go ahead and check out the shortcodes for those here: FontAwesome Shortcodes.

You can find the cheatsheet for FontAwesome here: FontAwesome Cheatsheet.

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x,fa-3x, fa-4x, or fa-5x classes. We also use these classes the same way on Ionicons and Glyphicons.

<span class="fa fa-camera-retro fa-5x"></span>

<span class="fa fa-camera-retro fa-4x"></span>

<span class="fa fa-camera-retro fa-3x"></span>

<span class="fa fa-camera-retro fa-2x"></span>

<span class="fa fa-camera-retro fa-lg"></span>

For the bordered icons, you have 3 options: .bordered-icon-lg, .bordered-icon-sm, and .bordered-icon-xs.

<span class="fa fa-phone bordered-icon-lg"></span>

<span class="fa fa-phone bordered-icon-sm"></span>

<span class="fa fa-phone bordered-icon-xs"></span>

For the colored bordered icons, you must add .bordered-icon-color to your <span> class. You can use the above sizing options (the ones women wish they had) as well.

<span class="fa fa-phone bordered-icon-color bordered-icon-lg"></span>

Use the fa-spin class to get any icon to rotate. Works well with fa-spinner, fa-refresh, and fa-cog.

<span class="fa fa-spinner bordered-icon-lg fa-spin"></span>