Icons

In order to ensure that "Design 2.0" is as lightweight as possible, the Font Awesome icon font is used to handle commonplace images. This also has the benefit of ensuring compatibility with high-resolution displays like Apple's Retina Display.

The examples below are based on Font Awesome's documentation; be sure to go there for more examples as well as a list of all available icons.

Basic Icon Example

Calculator
Calendar
Cloud
Envelope
Lock
Phone
Star
Visa
Spock 

<i class="fa fa-calculator"></i> Calculator
<i class="fa fa-calendar"></i> Calendar
<i class="fa fa-cloud"></i> Cloud
<i class="fa fa-envelope"></i> Envelope
<i class="fa fa-lock"></i> Lock
<i class="fa fa-phone"></i> Phone
<i class="fa fa-star-o"></i> Star
<i class="fa fa-cc-visa"></i> Visa
<i class="fa fa-hand-spock-o"></i> Spock

Fixed-With Icon Example

Calculator
Calendar
Cloud
Envelope
Lock
Phone
Star
Visa
Spock 

<i class="fa fa-calculator fa-fw"></i> Calculator
<i class="fa fa-calendar fa-fw"></i> Calendar
<i class="fa fa-cloud fa-fw"></i> Cloud
<i class="fa fa-envelope fa-fw"></i> Envelope
<i class="fa fa-lock fa-fw"></i> Lock
<i class="fa fa-phone fa-fw"></i> Phone
<i class="fa fa-star-o fa-fw"></i> Star
<i class="fa fa-cc-visa fa-fw"></i> Visa
<i class="fa fa-hand-spock-o fa-fw"></i> Spock

Icons with Hidden Labels

Calculator
Calendar
Cloud
Envelope
Lock
Phone
Star
Visa
Spock 

<i class="fa fa-calculator fa-fw"><span>Calculator</span></i>
<i class="fa fa-calendar fa-fw"><span>Calendar</span></i>
<i class="fa fa-cloud fa-fw"><span>Cloud</span></i>
<i class="fa fa-envelope fa-fw"><span>Envelope</span></i>
<i class="fa fa-lock fa-fw"><span>Lock</span></i>
<i class="fa fa-phone fa-fw"><span>Phone</span></i>
<i class="fa fa-star-o fa-fw"><span>Star</span></i>
<i class="fa fa-cc-visa fa-fw"><span>Visa</span></i>
<i class="fa fa-hand-spock-o fa-fw"><span>Spock</span></i>

Icon Sizes

Icons can be easily scaled without any loss in quality or clarity. In addition to using Font Awesome's built-in size classes, you can adjust the size of any icon with custom CSS.

Calendar
Calendar
Calendar
Calendar
Calendar
Calendar 

<i class="fa fa-calendar"></i> Calendar
<i class="fa fa-calendar fa-lg"></i> Calendar
<i class="fa fa-calendar fa-2x"></i> Calendar
<i class="fa fa-calendar fa-3x"></i> Calendar
<i class="fa fa-calendar fa-4x"></i> Calendar
<i class="fa fa-calendar fa-5x"></i> Calendar

Icon Animations

Note: Icon animations do not work in IE9 or older. 

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

Stacked Icons

You can use a combination (or stack) of icons to create new icon styles.

Flag on a circle
Flag on a square
Flag on a square, inverted
Banned flag 

<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> Flag on a circle

<span class="fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x"></i>
</span> Flag on a square

<span class="fa-stack fa-lg">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> Flag on a square, inverted

<span class="fa-stack fa-lg">
    <i class="fa fa-flag fa-stack-1x"></i>
    <i class="fa fa-ban fa-stack-2x"></i>
</span> Banned flag