Icons

Overview

About Font Awesome 5

Font Awesome 5 is a SVG-based framework that gives you all the benefits of using SVG icons on the web.
Font Awesome on GitHub.
A complete list of available icons is available in the icon gallery.

Usage

Add Font Awesome 5 to your project by either using the version included in this UI Library, or from https://fontawesome.com/get-started/advanced-options.
The USPTO recommends using the SVG with JS method for the greatest design flexibility.
Add your icons and include .fas to ensure SVG with JS is being used.
Full capabilities documentation can be viewed on the Font Awesome help pages.

        <i class="fas fa-images text-primary fa-5x"></i>

Icon color

Font Awesome 5 icons automatically inherit the color of the associated class or container around them.

Use either a colored circle with a white icon, or a colored icon; not both together. If necessary, you may use a dark circle to add emphasis to warning icons.
Always ensure final icon usage is 508 compliant for color contrast.

Primary

.text-primary

Info

.text-info

Success

.text-success

Warning

.text-warning

Danger

.text-danger

<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-primary"><i class="fas fa-cloud fa-2x"></i></span><div>Primary</div><div class="text-muted">.text-primary</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-info"><i class="fas fa-bell fa-2x"></i></span><div>Info</div><div class="text-muted">.text-info</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-success"><i class="fas fa-check-circle fa-2x"></i></span><div>Success</div><div class="text-muted">.text-success</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-warning"><i class="fas fa-exclamation-triangle fa-2x"></i></span><div>Warning</div><div class="text-muted">.text-warning</div></div>
<div class="col-xs-6 col-sm-4 col-md-2 text-center"><span class="text-danger"><i class="fas fa-exclamation fa-2x"></i></span><div>Danger</div><div class="text-muted">.text-danger</div></div>

System Icons

System icons should always be one solid color.
System icons should either be black, white, or any other primary UI color.
System icons can be placed in colored circles.
Icon colors can be inverted with .fa-inverse.

    <span class="fa-layers fa-2x">
        <i class="fas fa-circle text-primary"></i>
        <i class="fas fa-bell fa-inverse" data-fa-transform="shrink-8 down-.25 right-.25"></i>
    </span>

Icon sizing

Icons can vary in size, from extra small to 10x, by adding .fa-xs, .fa-sm, .fa-lg, .fa-2x, .fa-3x, .fa-5x, .fa-10x.
When scaling icons, ensure the sizes used appear sharp on standard and high DPI screens.

.fa-xs

.fa-sm

.fa-lg

.fa-2x

.fa-3x

        <div class="text-muted">.fa-xs</div><i class="fas fa-chart-pie fa-lg"></i>

Rotation

Power Transform rotating and flipping effects icon angle and reflection without changing or moving the container. To rotate or flip icons use any combination of rotate-#, flip-v, and flip-h with any arbitrary value.

    <div class="fa-4x">
      <i class="fas fa-magic" data-fa-transform="rotate-90"></i>
      <i class="fas fa-magic" data-fa-transform="rotate-180" ></i>
      <i class="fas fa-magic" data-fa-transform="rotate-270" ></i>
      <i class="fas fa-magic" data-fa-transform="rotate-30" ></i>
      <i class="fas fa-magic" data-fa-transform="rotate--30" ></i>
      <i class="fas fa-magic" data-fa-transform="flip-v"></i>
      <i class="fas fa-magic" data-fa-transform="flip-h"></i>
      <i class="fas fa-magic" data-fa-transform="flip-v flip-h"></i>
    </div>

Animation

Use the .fa-spin class to get any icon to rotate, and use .fa-pulse to have it rotate with 8 steps.

Where possible, use icons for content loading animation

    <div class="fa-3x">
      <i class="fas fa-spinner fa-spin"></i>
      <i class="fas fa-circle-notch fa-spin"></i>
      <i class="fas fa-sync fa-spin"></i>
      <i class="fas fa-cog fa-spin"></i>
      <i class="fas fa-spinner fa-pulse"></i>
    </div>