Bulma Icon Font Awesome Variations

In this article, we'll be seeing Bulma Font Awesome icon variations. Bulma has 4 types of Font Awesome variations and they include, fixed-width icons, bordered icons, animated and stacked icons. All of these variations are discussed below with each of their examples.

Bulma Icon Font Awesome Variations Modifiers:

• Fixed width: For using a fixed-width icon, use fa-fw class to add a normal icon.
• Bordered width:  For using a border-width icon, use fa-border class to add a border around the icon.
• Animated: For using an animated icon, use the fa-pulse class to add an animation to the icon.
• Stacked: For adding two icons on top of each other or want to make an icon stack, use fa-stack-2x and fa-stack-1x fa-inverse class.

Syntax:

<span class="icon">
 <span class="fas fa-music fa-fw"></span>
 <span class="fas fa-music fa-border"></span>
 <span class="fas fa-spinner fa-pulse"></span>
 ....
</span>

Example: Below example illustrates Bulma Font Awesome icon variations.

Output:

Reference: https://bulma.io/documentation/elements/icon/#font-awesome-variations