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

# 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!