Icons

In order to ensure that "Design 2.0" is as lightweight as possible, the Font Awesome and Line Awesome icon fonts are 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

Font Awesome

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

Line Awesome

Calculator
Calendar
Cloud
Envelope
Lock
Phone
Star
Visa
Spock 

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

Fixed-Width Icon Example

Font Awesome

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

Line Awesome

Calculator
Calendar
Cloud
Envelope
Lock
Phone
Star
Visa
Spock 

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

Icons with Hidden Labels

Font Awesome

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>

Line Awesome

Calculator
Calendar
Cloud
Envelope
Lock
Phone
Star
Visa
Spock 

<i class="las la-calculator"><span>Calculator</span></i>
<i class="las la-calendar"><span>Calendar</span></i>
<i class="las la-cloud"><span>Cloud</span></i>
<i class="las la-envelope"><span>Envelope</span></i>
<i class="las la-lock"><span>Lock</span></i>
<i class="las la-phone"><span>Phone</span></i>
<i class="lar la-star"><span>Star</span></i>
<i class="lab la-cc-visa"><span>Visa</span></i>
<i class="las la-hand-spock"><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.

Font Awesome

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

Line Awesome

Calendar
Calendar
Calendar
Calendar
Calendar
Calendar 

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

Icon Animations

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

Font Awesome 

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

Line Awesome 

<i class="las la-spinner la-spin"></i>
<i class="las la-sync la-spin"></i>
<i class="las la-cog la-spin"></i>

Stacked Icons

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

Font Awesome

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

Line Awesome

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

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

<span class="la-stack la-lg">
    <i class="lar la-square la-stack-2x"></i>
    <i class="las la-flag la-stack-1x"></i>
</span> Flag on a square

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

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