Icons

Documentation about icon libraries used within template pages and UI components.

Bootstrap Icons

High quality, open source icon library with over 1,500 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts. On this template, we use web fonts method since it's clean and simple.

          
  <i class="bi bi-alarm"></i>
  <i class="bi bi-alarm fs-1"></i>
  <i class="bi bi-alarm text-primary"></i>
  <i class="bi bi-alarm" style="font-size: 2rem; color: teal;"></i>

Font Awesome 5 Cheatsheet

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit. There are 2 icon styles included in our template, solid and and brands, with each prefix goes with fas and fab.

          
  <i class="fas fa-camera"></i>
  <i class="fab fa-facebook"></i>

Sizing

          
  <i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>

Icons in a list

Use fa-ul and fa-li to replace default bullets in unordered lists.

List icons can
be used to
replace bullets
in lists

          
  <ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
  </ul>

Rotating icons

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes when you reference an icon.

          
  <div class="fa-4x">
    <i class="fas fa-snowboarding"></i>
    <i class="fas fa-snowboarding fa-rotate-90"></i>
    <i class="fas fa-snowboarding fa-rotate-180"></i>
    <i class="fas fa-snowboarding fa-rotate-270"></i>
    <i class="fas fa-snowboarding fa-flip-horizontal"></i>
    <i class="fas fa-snowboarding fa-flip-vertical"></i>
    <i class="fas fa-snowboarding fa-flip-both"></i>
  </div>

Animating icons

Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate with eight steps. This works especially well with fa-spinner.

          
  <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>
    <i class="fas fa-stroopwafel fa-spin"></i>
  </div>

Stacked icons

To stack multiple icons, use the fa-stack class on the parent HTML element of the 2 icons you want to stack. Then add the fa-stack-1x class for the regularly sized icon and add the fa-stack-2x class for the larger icon. fa-inverse can be added to the icon with the fa-stack-1x to help with a knock-out looking effect. You can even throw larger icon classes on the parent to get further control of sizing.

          
  <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>
  <span class="fa-stack fa-2x">
    <i class="fas fa-camera fa-stack-1x"></i>
    <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
  </span>

Getting Started

Layout

Content

Components

Utility classes

Extend