Icons

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.

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 icons will inherit the font size.

Since icon fonts are simply text, you can use the text color modifiers to change the icon's color.

The Bulma icon container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome icons use a font-size of 1em by default (since it inherits the font size), but provides additional sizes.

Font Awesome also provides modifier classes for:

• fixed width icons
• bordered icons
• animated icons
• rotated & flipped icons
• stacked icons

Here is how the icon container can be used with Material Design Icons.

MDI also provides modifier classes for:

• light and dark icons
• rotated & flipped icons

Here is how the icon container can be used with Open Iconic.

Here is how the icon container can be used with Ionicons.

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.