You are viewing the deprecated 0.5.2 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 all icon font libraries: Font Awesome, Material Design Icons, Open Iconic, Ionicons etc.

Colors Yes
Sizes Yes
Variables Yes

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.

    <span class="icon">
      <i class="fa fa-home"></i>
    </span>

The yellow background is only here for demonstration purposes, to highlight the icon container's area.

By defualt, 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.

### Colors #

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

    <span class="icon has-text-info">
      <i class="fa fa-info-circle"></i>
    </span>
    <span class="icon has-text-success">
      <i class="fa fa-check-square"></i>
    </span>
    <span class="icon has-text-warning">
      <i class="fa fa-warning"></i>
    </span>
    <span class="icon has-text-danger">
      <i class="fa fa-ban"></i>
    </span>

### Sizes #

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.

Container class | Container size | Font Awesome class | Icon size | Result
--- | --- | --- | --- | ---
`icon is-small` | `1rem x 1rem` | `fa` | `1em` |
`icon` | `1.5rem x 1.5rem` | `fa` | `1em` |
`fa fa-lg` | `1.33em` |
`icon is-medium` | `2rem x 2rem` | `fa` | `1em` |
`fa fa-lg` | `1.33em` |
`fa fa-2x` | `2em` |
`icon is-large` | `3rem x 3rem` | `fa` | `1em` |
`fa fa-lg` | `1.33em` |
`fa fa-2x` | `2em` |
`fa fa-3x` | `3em` |

### Font Awesome variations #

Font Awesome also provides modifier classes for:

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

Type | Font Awesome class | Result
--- | --- | ---
Fixed width | `fa fa-fw` |
Bordered | `fa fa-border` |
Animated | `fa fa-refresh fa-spin` |
Rotated & flipped | `fa fa-shield` `fa fa-shield fa-rotate-90` `fa fa-shield fa-rotate-180` `fa fa-shield fa-rotate-270` `fa fa-shield fa-flip-horizontal` `fa fa-shield fa-flip-vertical` |
Stacked |
    <span class="icon is-medium">
      <span class="fa-stack">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
      </span>
    </span>
    <span class="icon is-large">
      <span class="fa-stack fa-lg">
        <i class="fa fa-camera fa-stack-1x"></i>
        <i class="fa fa-ban fa-stack-2x has-text-danger"></i>
      </span>
    </span>

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

### Open Iconic #

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

Container class | Container size | Iconic class | Icon size | Result
--- | --- | --- | --- | ---
`icon is-small` | `1rem x 1rem` | `oi [data-glyph=puzzle-piece]` | `1em` |
`icon` | `1.5rem x 1.5rem` | `oi [data-glyph=puzzle-piece]` | `1em` |
`icon is-medium` | `2rem x 2rem` | `oi [data-glyph=puzzle-piece]` | `1em` |
`icon is-large` | `3rem x 3rem` | `oi [data-glyph=puzzle-piece]` | `1em` |

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

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