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 container:
You are viewing the deprecated 0.5.0 version of the website. Click here to view the latest version
Documentation
Everything you need to create a website with Bulma
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 container:
<span class="icon">
<i class="fa fa-home"></i>
</span>The icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized at 21px.
Font Awesome icons use a font-size of 28px by default, and are best rendered when using multiples of 7.
The Bulma icon container is always slightly bigger than the font-size used:
| Class | Font-size | Container size | |
|---|---|---|---|
icon is-small |
14px | 1rem x 1rem | |
icon |
21px | 1.5rem x 1.5rem | |
icon is-medium |
28px | 2rem x 2rem | |
icon is-large |
42px | 3rem x 3rem | |
You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.
| Name | Default value |
|---|---|
| Name | Default value |
$icon-dimensions
|
1.5rem
|
$icon-dimensions-small
|
1rem
|
$icon-dimensions-medium
|
2rem
|
$icon-dimensions-large
|
3rem
|
This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub
Bulma Partners
Check out their products!