Bulma Icons
Bulma icons are compatible with all the font icon libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Ionic Icons, etc.
The icon color can be changed by color modifier class and icon size can be changed by following modifier class:
.is-small, .is-medium, .is-large.
Example
Source Code
<span class="icon">
<i class="fas fa-address-card"></i>
</span>
Source Code : Output
Bulma CSS Icon With Text
To combine the icon with text, just wrap the icon inside the container having modifier class .icon-text
Example
UserGeneral Syntax
<span class="icon-text">
<span class="icon"><i class="fas fa-user-circle"></i></span>
<span>User</span>
</span>
Source Code
<div class="container">
<span class="icon-text">
<span class="icon"><i class="fas fa-user-circle"></i></span>
<span>User</span>
</span>
</div>
Source Code : Output
Bulma CSS Icon Color
To change the color of the icon, use the color helpers modifier class.
Example
General Syntax
<span class="icon has-text-warning">
<i class="fas fa-chart-bar"></i>
</span>
Source Code
<span class="icon has-text-warning">
<i class="fas fa-chart-bar"></i>
</span>
Source Code : Output
Bulma CSS Icon: Sizes
The Bulma icon container is available in 4 sizes. I t size can be controlled by following modifier classes:
.icon .is-small, .icon, .icon .is-medium, .icon .is-large
General Syntax
<span class="icon is-{small| medium | large}">
<span class="fa-stack fa-sm">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
</span>
Source Code
<div class="container">
<span class="icon is-small">
<i class="fas fa-user"></i>
</span>
<span class="icon is-medium">
<i class="fas fa-2x fa-user"></i>
</span>
<span class="icon is-large">
<i class="fas fa-3x fa-user"></i>
</span>
</div>
Source Code : Output
Web Tutorials
