The icon
element is a container for any type of icon font. Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon
class as a reliable square container that will prevent the page to "jump" on page load.
Icon
Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Ionicons, etc.
By default, the icon
container will take up exactly 1.5rem x 1.5rem
. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.
Icon text #
You can combine an icon
with text, using the icon-text
wrapper, as long as all text inside is wrapped in its own span
element:
You can combine as many icon
elements and text elements as you want:
Since icon-text
is an inline-flex
element, it can easily be inserted within any paragraph of text.
An invitation to dinner was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in town the following day, and, consequently, unable to accept the honour of their invitation , etc.
Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his arrival in Hertfordshire; and she began to fear that he might be always flying about from one place to another, and never settled at Netherfield as he ought to be.
You can also turn the icon-text
into a flex
element simply by using a <div>
tag instead:
Your package will be delivered on Tuesday at 08:00.
Your image has been successfully uploaded.
Some information is missing from your profile details.
There was an error in your submission. Please try again.
Colors #
Since icon fonts are simply text, you can use the color helpers to change the icon's color.
The same applies to the icon-text
:
Sizes #
The Bulma icon
container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome 5 icons use a font-size of 1em
by default (since it inherits the font size), but provides additional sizes.
Container class | Container size | Font Awesome 5 class | Icon size | Result |
---|---|---|---|---|
icon is-small
|
1rem x 1rem
|
fas
|
1em
|
|
icon
|
1.5rem x 1.5rem
|
fas
|
1em
|
|
fas fa-lg
|
1.33em
|
|||
icon is-medium
|
2rem x 2rem
|
fas
|
1em
|
|
fas fa-lg
|
1.33em
|
|||
fas fa-2x
|
2em
|
|||
icon is-large
|
3rem x 3rem
|
fas
|
1em
|
|
fas fa-lg
|
1.33em
|
|||
fas fa-2x
|
2em
|
|||
fas fa-3x
|
3em
|
Font Awesome variations #
Font Awesome also provides modifier classes for:
- fixed width icons
- bordered icons
- animated icons
- rotated & flipped icons
- stacked icons
Type | Font Awesome class | Result |
---|---|---|
Fixed width |
fas fa-fw
|
|
Bordered |
fas fa-border
|
|
Animated |
fas fa-spinner fa-pulse
|
|
Rotated & flipped |
fas fa-shield-alt fas fa-shield-alt data-fa-transform="rotate-90" fas fa-shield-alt data-fa-transform="rotate-180" fas fa-shield-alt data-fa-transform="rotate-270" fas fa-shield-alt data-fa-transform="flip-h" fas fa-shield-alt data-fa-transform="flip-v"
|
|
Stacked | ||
Material Design Icons #
Here is how the icon
container can be used with Material Design Icons.
Container class | Container size | MDI class | Icon size | Result |
---|---|---|---|---|
icon is-small
|
1rem x 1rem
|
mdi
|
1em
|
|
icon
|
1.5rem x 1.5rem
|
mdi mdi-18px
|
18px
|
|
mdi mdi-24px
|
24px
|
|||
icon is-medium
|
2rem x 2rem
|
mdi
|
1em
|
|
mdi mdi-18px
|
18px
|
|||
mdi mdi-24px
|
24px
|
|||
mdi mdi-36px
|
36px
|
|||
icon is-large
|
3rem x 3rem
|
mdi
|
1em
|
|
mdi mdi-18px
|
18px
|
|||
mdi mdi-24px
|
24px
|
|||
mdi mdi-36px
|
36px
|
|||
mdi mdi-48px
|
48px
|
MDI also provides modifier classes for:
- light and dark icons
- rotated & flipped icons
Type | Material Design Icon class | Result |
---|---|---|
Light color |
mdi mdi-light
|
|
Dark color |
mdi mdi-dark
|
|
Light inactive color |
mdi mdi-light mdi-inactive
|
|
Dark inactive color |
mdi mdi-dark mdi-inactive
|
|
Flipped |
mdi mdi-flip-h
mdi mdi-flip-v
|
|
Rotated |
mdi mdi-rotate-45
mdi mdi-rotate-90
mdi mdi-rotate-180
|
|
Ionicons #
Here is how the icon
container can be used with Ionicons.
Container class | Container size | Ionicon class | Icon size | Result |
---|---|---|---|---|
icon is-small
|
1rem x 1rem
|
ion-ionic
|
1em
|
|
icon
|
1.5rem x 1.5rem
|
ion-ionic
|
1em
|
|
icon is-medium
|
2rem x 2rem
|
ion-ionic
|
1em
|
|
icon is-large
|
3rem x 3rem
|
ion-ionic
|
1em
|
Variables #
You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.
Name | Type | Default value | Computed value |
---|---|---|---|
Name | Type | Default value | Computed value |
$icon-dimensions
|
size |
1.5rem
|
|
$icon-dimensions-small
|
size |
1rem
|
|
$icon-dimensions-medium
|
size |
2rem
|
|
$icon-dimensions-large
|
size |
3rem
|
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub