Icons

Boost uses Font Awesome, the world’s most popular icon set.

Wrap an icon in a container with .icon and .icon-{color} to add a background color. Center it using .m-auto.

Change the icon size by adding .icon-sm or .icon-lg.

<div class="icon icon-success icon-lg">
  <i class="fa-solid fa-desktop m-auto"></i>
</div>
<div class="icon icon-warning">
  <i class="fa-solid fa-tablet-alt m-auto"></i>
</div>
<div class="icon icon-primary icon-sm">
  <i class="fa-solid fa-mobile-alt m-auto"></i>
</div>

Accessibility

If an icon is purely decorative, add the aria-hidden attribute.

<i class="fa-solid fa-mobile-alt" aria-hidden="true"></i>

For icons with semantic meaning, use aria-hidden attribute, and provide a text alternative. Hide the text visually while keeping it accessible with .visually-hidden.

<a class="icon icon-secondary" href="#">
  <i class="fa-brands fa-instagram" aria-hidden="true"></i>
  <span class="visually-hidden">Instagram</span>
</a>