Icons

Boost uses Font Awesome, the world’s most popular and easiest to use icon set.

To add an icon with a background color, add a container with the class icon and the icon-{color}. You can change the icon size adding .icon-sm or .icon-lg. Then include an icon inside with the class .icon-inner.

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

Accessibility

If your icons are purely decorative, you’ll need to add an aria-hidden attribute to each of your icons so they’re accessible.

        
            <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, you'll need to provide a text alternative. You can hide this text while keeping it accessible for assistive technologies using .sr-only.

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

See all available icons.