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.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" />
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" />
< title >GFG</ title >
< link rel = "stylesheet"
href =
< script src =
</ script >
</ head >
< body >
< div class = "content container has-text-centered" >
< h1 class = "title has-text-success" >
GeekforGeeks
</ h1 >
< h1 class = "subtitle" >
Bulma Font Awesome icons variations
</ h1 >
< div class = "container" >
< span class = "icon is-small has-text-danger" >
< span class = "fas fa-music fa-fw" ></ span >
</ span >
< br />
< span class = "icon is-large has-text-danger" >
< span class = "fas fa-music fa-border" ></ span >
</ span >
< br />
< span class = "icon is-small has-text-success" >
< span class = "fas fa-spinner fa-pulse" ></ span >
</ span >
< br />
< span class = "icon is-medium" >
< span class = "fa-stack fa-sm" >
< i class = "fas fa-circle fa-stack-2x" ></ i >
< i class="fas fa-music
fa-stack-1x fa-inverse"></ i >
</ span >
</ span >
< br />
< span class = "icon is-large" >
< span class = "fa-stack fa-lg" >
< i class = "fas fa-music fa-stack-1x" ></ i >
< i class="fas fa-ban
fa-stack-2x has-text-danger"></ i >
</ span >
</ span >
</ div >
</ div >
</ body >
</ html >
|
Output:
Bulma Icon Font Awesome Variations
Reference: https://bulma.io/documentation/elements/icon/#font-awesome-variations
Last Updated :
22 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...