下载

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

Password.link

Icon

Compatible with all icon font libraries, including Font Awesome 5

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.

Example

HTML 

<span class="icon">
  <i class="fas fa-home"></i>
</span>
The yellow background is only here for demonstration purposes, to highlight the icon container's area.

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

Icon text #

You can combine an icon with text, using the icon-text wrapper, as long as all text inside is wrapped in its own span element:

Example

Home

HTML 

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

You can combine as many icon elements and text elements as you want:

Example

Paris Budapest Bucharest Istanbul

HTML 

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-train"></i>
  </span>
  <span>Paris</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Budapest</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Bucharest</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Istanbul</span>
  <span class="icon">
    <i class="fas fa-flag-checkered"></i>
  </span>
</span>

Since icon-text is an inline-flex element, it can easily be inserted within any paragraph of text.

Example

An invitation to dinner was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in town the following day, and, consequently, unable to accept the honour of their invitation , etc.

Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his arrival in Hertfordshire; and she began to fear that he might be always flying about from one place to another, and never settled at Netherfield as he ought to be.

HTML 

<div class="content">
  <p>
    An invitation to
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-utensils"></i>
      </span>
      <span>dinner</span>
    </span>
    was soon afterwards dispatched; and already had Mrs. Bennet planned the
    courses that were to do credit to her housekeeping, when an answer arrived
    which deferred it all. Mr. Bingley was obliged to be in
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-city"></i>
      </span>
      <span>town</span>
    </span>
    the following day, and, consequently, unable to accept the honour of their
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-envelope-open-text"></i>
      </span>
      <span>invitation</span> </span
    >, etc.
  </p>

  <p>
    Mrs. Bennet was quite disconcerted. She could not imagine what business he
    could have in town so soon after his
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-flag-checkered"></i>
      </span>
      <span>arrival</span>
    </span>
    in Hertfordshire; and she began to fear that he might be always
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-plane-departure"></i>
      </span>
      <span>flying</span>
    </span>
    about from one place to another, and never settled at Netherfield as he
    ought to be.
  </p>
</div>

You can also turn the icon-text into a flex element simply by using a <div> tag instead:

Example

Information

Your package will be delivered on Tuesday at 08:00.

Success

Your image has been successfully uploaded.

Warning

Some information is missing from your profile details.

Danger

There was an error in your submission. Please try again.

HTML 

<div class="icon-text">
  <span class="icon has-text-info">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Information</span>
</div>

<p class="block">
  Your package will be delivered on <strong>Tuesday at 08:00</strong>.
</p>

<div class="icon-text">
  <span class="icon has-text-success">
    <i class="fas fa-check-square"></i>
  </span>
  <span>Success</span>
</div>

<p class="block">Your image has been successfully uploaded.</p>

<div class="icon-text">
  <span class="icon has-text-warning">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <span>Warning</span>
</div>

<p class="block">
  Some information is missing from your <a href="#">profile</a> details.
</p>

<div class="icon-text">
  <span class="icon has-text-danger">
    <i class="fas fa-ban"></i>
  </span>
  <span>Danger</span>
</div>

<p class="block">
  There was an error in your submission. <a href="#">Please try again</a>.
</p>

Colors #

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

Example

HTML 

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

The same applies to the icon-text:

Example

Info Success Warning Danger

HTML 

<span class="icon-text has-text-info">
  <span class="icon">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Info</span>
</span>

<span class="icon-text has-text-success">
  <span class="icon">
    <i class="fas fa-check-square"></i>
  </span>
  <span>Success</span>
</span>

<span class="icon-text has-text-warning">
  <span class="icon">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <span>Warning</span>
</span>

<span class="icon-text has-text-danger">
  <span class="icon">
    <i class="fas fa-ban"></i>
  </span>
  <span>Danger</span>
</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 5 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 5 class Icon size Result
icon is-small 1rem x 1rem fas 1em
icon 1.5rem x 1.5rem fas 1em
fas fa-lg 1.33em
icon is-medium 2rem x 2rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em
icon is-large 3rem x 3rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em

Font Awesome variations #

Font Awesome also provides modifier classes for:

  • fixed width icons
  • bordered icons
  • animated icons
  • stacked icons
Type Font Awesome class Result
Fixed width fas fa-fw
Bordered fas fa-border
Animated fas fa-spinner fa-pulse
Stacked 
<span class="icon is-medium">
  <span class="fa-stack fa-sm">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
  </span>
</span>
 
<span class="icon is-large">
  <span class="fa-stack fa-lg">
    <i class="fas fa-camera fa-stack-1x"></i>
    <i class="fas 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

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

Sass and CSS variables #

Sass Variable
CSS Variable
Value 
$icon-dimensions
 
var(--bulma-icon-dimensions)
 
1.5rem
 
$icon-dimensions-small
 
var(--bulma-icon-dimensions-small)
 
1rem
 
$icon-dimensions-medium
 
var(--bulma-icon-dimensions-medium)
 
2rem
 
$icon-dimensions-large
 
var(--bulma-icon-dimensions-large)
 
3rem
 
$icon-text-spacing
 
var(--bulma-icon-text-spacing)
 
0.25em

赞助

One-time donation

Visit our Sponsors

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#