Documentation

Everything you need to create a website with Bulma

Icons

Bulma is compatible with Font Awesome icons.

Colors No
Sizes Yes
Variables Yes

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.


Sizes #

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

Variables #

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!

Bulma Newsletter

Get notified when v1 is ready!