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:
示例
Home
HTML
<span class="icon-text">
<span class="icon">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</span>
You can combine as many icon elements and text elements as you want:
示例
Paris
Budapest
Bucharest
Istanbul
HTML
<span class="icon-text">
<span class="icon">
<i class="fas fa-train"></i>
</span>
<span>Paris</span>
<span class="icon">
<i class="fas fa-arrow-right"></i>
</span>
<span>Budapest</span>
<span class="icon">
<i class="fas fa-arrow-right"></i>
</span>
<span>Bucharest</span>
<span class="icon">
<i class="fas fa-arrow-right"></i>
</span>
<span>Istanbul</span>
<span class="icon">
<i class="fas fa-flag-checkered"></i>
</span>
</span>
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.
HTML
<div class="content">
<p>
An invitation to
<span class="icon-text">
<span class="icon">
<i class="fas fa-utensils"></i>
</span>
<span>dinner</span>
</span>
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
<span class="icon-text">
<span class="icon">
<i class="fas fa-city"></i>
</span>
<span>town</span>
</span>
the following day, and, consequently, unable to accept the honour of their
<span class="icon-text">
<span class="icon">
<i class="fas fa-envelope-open-text"></i>
</span>
<span>invitation</span>
</span>,
etc.
</p>
<p>
Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his
<span class="icon-text">
<span class="icon">
<i class="fas fa-flag-checkered"></i>
</span>
<span>arrival</span>
</span>
in Hertfordshire; and she began to fear that he might be always
<span class="icon-text">
<span class="icon">
<i class="fas fa-plane-departure"></i>
</span>
<span>flying</span>
</span>
about from one place to another, and never settled at Netherfield as he ought to be.
</p>
</div>
You can also turn the icon-text into a flex element simply by using a <div> tag instead:
示例
Information
Your package will be delivered on Tuesday at 08:00.
Success
Your image has been successfully uploaded.
Warning
Some information is missing from your profile details.
Danger
There was an error in your submission. Please try again.
HTML
<div class="icon-text">
<span class="icon has-text-info">
<i class="fas fa-info-circle"></i>
</span>
<span>Information</span>
</div>
<p class="block">
Your package will be delivered on <strong>Tuesday at 08:00</strong>.
</p>
<div class="icon-text">
<span class="icon has-text-success">
<i class="fas fa-check-square"></i>
</span>
<span>Success</span>
</div>
<p class="block">
Your image has been successfully uploaded.
</p>
<div class="icon-text">
<span class="icon has-text-warning">
<i class="fas fa-exclamation-triangle"></i>
</span>
<span>Warning</span>
</div>
<p class="block">
Some information is missing from your <a href="#">profile</a> details.
</p>
<div class="icon-text">
<span class="icon has-text-danger">
<i class="fas fa-ban"></i>
</span>
<span>Danger</span>
</div>
<p class="block">
There was an error in your submission. <a href="#">Please try again</a>.
</p>Colors #
Since icon fonts are simply text, you can use the color helpers to change the icon's color.
示例
HTML
<span class="icon has-text-info">
<i class="fas fa-info-circle"></i>
</span>
<span class="icon has-text-success">
<i class="fas fa-check-square"></i>
</span>
<span class="icon has-text-warning">
<i class="fas fa-exclamation-triangle"></i>
</span>
<span class="icon has-text-danger">
<i class="fas fa-ban"></i>
</span>
The same applies to the icon-text:
示例
Info
Success
Warning
Danger
HTML
<span class="icon-text has-text-info">
<span class="icon">
<i class="fas fa-info-circle"></i>
</span>
<span>Info</span>
</span>
<span class="icon-text has-text-success">
<span class="icon">
<i class="fas fa-check-square"></i>
</span>
<span>Success</span>
</span>
<span class="icon-text has-text-warning">
<span class="icon">
<i class="fas fa-exclamation-triangle"></i>
</span>
<span>Warning</span>
</span>
<span class="icon-text has-text-danger">
<span class="icon">
<i class="fas fa-ban"></i>
</span>
<span>Danger</span>
</span>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
|
Font Awesome variations #
Font Awesome also provides modifier classes for:
- fixed width icons
- bordered icons
- animated icons
- stacked icons
| Type | Font Awesome class | Result |
|---|---|---|
| Fixed width |
fas fa-fw
|
|
| Bordered |
fas fa-border
|
|
| Animated |
fas fa-spinner fa-pulse
|
|
| 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 #
Name
Type
Value
Computed Value
Computed Type
$icon-dimensionssize
1.5rem$icon-dimensions-smallsize
1rem$icon-dimensions-mediumsize
2rem$icon-dimensions-largesize
3rem$icon-text-spacingsize
0.25em