Icons

In order to ensure that "Design 2.0" is as lightweight as possible, the Font Awesome 5 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="fas fa-calculator"></i> Calculator
<i class="fas fa-calendar"></i> Calendar
<i class="fas fa-cloud"></i> Cloud
<i class="fas fa-envelope"></i> Envelope
<i class="fas fa-lock"></i> Lock
<i class="fas fa-phone"></i> Phone
<i class="far fa-star"></i> Star
<i class="fab fa-cc-visa"></i> Visa
<i class="fas fa-hand-spock"></i> Spock

Fixed-With Icon Example

Calculator
Calendar
Cloud
Envelope
Lock
Phone
Star
Visa
Spock 

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

Icons with Hidden Labels

Calculator
Calendar
Cloud
Envelope
Lock
Phone
Star
Visa
Spock 

<i class="fas fa-calculator fa-fw"><span>Calculator</span></i>
<i class="fas fa-calendar fa-fw"><span>Calendar</span></i>
<i class="fas fa-cloud fa-fw"><span>Cloud</span></i>
<i class="fas fa-envelope fa-fw"><span>Envelope</span></i>
<i class="fas fa-lock fa-fw"><span>Lock</span></i>
<i class="fas fa-phone fa-fw"><span>Phone</span></i>
<i class="far fa-star fa-fw"><span>Star</span></i>
<i class="fab fa-cc-visa fa-fw"><span>Visa</span></i>
<i class="fas fa-hand-spock 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="fas fa-calendar"></i> Calendar
<i class="fas fa-calendar fa-lg"></i> Calendar
<i class="fas fa-calendar fa-2x"></i> Calendar
<i class="fas fa-calendar fa-3x"></i> Calendar
<i class="fas fa-calendar fa-4x"></i> Calendar
<i class="fas fa-calendar fa-5x"></i> Calendar

Icon Animations

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

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

Stacked Icons

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



<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-4x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>