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>