Skip to main content

Icons

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

To add an icon with a background color, add a container with the class .icon and the .icon-{color}. Then include an icon inside with the class .icon-inner.

You can change the icon size by adding .icon-sm or .icon-lg.

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

Accessibility

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

<span class="icon icon-sm icon-primary">
<i class="icon-inner fas fa-mobile-alt" aria-hidden="true"></i>
</span>

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="icon-inner fab fa-twitter" aria-hidden="true"></i>
<span class="visually-hidden">Twitter</span>
</a>

See all available icons.