Skip to main content

Icons

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

Add a container with the classes .icon and .icon-{color} to create an icon with a background color. Then include an icon inside with the class .m-auto to center it.

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

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

Accessibility

If your icons are purely decorative, add an aria-hidden attribute.

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

If your icons have semantic meaning, in addition to the aria-hidden attribute, provide a text alternative. You can hide this text while keeping it accessible for assistive technologies using .visually-hidden.

<a class="icon icon-sm icon-secondary" href="#">
  <i class="fab fa-twitter" aria-hidden="true"></i>
  <span class="visually-hidden">Twitter</span>
</a>

See all free available icons