Icons

Icons

This template loads an icon font, so you can place an icon anywhere in your content by adding an empty element carrying the icon's class names.

Basic usage

Use the style class and the icon name together. Solid icons use fa-solid, outline icons use fa-regular, and company logos use fa-brands.

<i class="fa-solid fa-camera-retro" aria-hidden="true"></i>
<i class="fa-regular fa-star" aria-hidden="true"></i>
<i class="fa-brands fa-facebook" aria-hidden="true"></i>

Sizing, alignment and animation

• fa-lg, fa-2x through fa-5x scale the icon relative to the surrounding text.
• fa-fw gives every icon the same width, so lists and menus line up.
• fa-spin and fa-pulse rotate an icon — useful for loading indicators.
• fa-rotate-90, fa-rotate-180, fa-rotate-270, fa-flip-horizontal and fa-flip-vertical reorient it.

Accessibility

An icon used for decoration should carry aria-hidden="true" so screen readers skip it. An icon that is the only label for a control needs visible-to-assistive-technology text alongside it.

<a href="/cart"><i class="fa-solid fa-cart-shopping" aria-hidden="true"></i><span class="visually-hidden">Cart</span></a>

Finding the class names

The complete icon list and the exact class name for each icon are published in the icon library's own documentation, which is kept current as icons are added.