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
Compatible with all icon font libraries, including Font Awesome 5
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:
Example
HTML
You can combine as many icon
elements and text elements as you want:
Example
HTML
Since icon-text
is an inline-flex
element, it can easily be inserted within any paragraph
of text.
Example
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
You can also turn the icon-text
into a flex
element simply by using a
<div>
tag instead:
Example
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.
HTML
Colors #
Since icon fonts are simply text, you can use the color helpers to change the icon's color.
Example
HTML
The same applies to the icon-text
:
Example
HTML
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
|
Sass and CSS variables #
Sass Variable
|
CSS Variable
|
Value
|
---|---|---|