字体图标（Icon）

Bulma兼容所有图标字体库：font Awesome 5、font Awesome 4、Material Design Icons、Ionicons等。

1

icon 元素是任何类型的图标字体的容器。 因为图标可能需要几秒钟的时间来加载，而且您希望控制图标将占用的空间，可以将icon类用作可靠的方形容器，以防止页面在加载时“跳转”。

Example

HTML 

<span class="icon">
    <i class="fas fa-home"></i>
  </span>
黄色背景仅用于演示，以突出显示图标容器的区域。

默认情况下，图标容器的大小正好为1.5rem x 1.5rem。图标本身的大小根据您使用的图标库而定。例如，Font Awesome5图标将继承字体大小。

1.图标文本Icon text

Coming soon!

可以使用icon-text图标文本包装器将图标与文本组合，只要其中的所有文本都包装在其自己的span元素中：

Example

Home

HTML 

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

您可以根据需要组合任意多个图标元素和文本元素：

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>

由于icon text是一个内联flex元素，它可以很容易地插入到文本的任何段落中。

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>

也可以使用

标记将图标文本转换为flex元素：

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>

2.颜色

由于图标字体只是文本，因此可以使用颜色辅助对象更改图标的颜色。

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>

这同样适用于图标文本：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 #

2.大小

Bulma图标容器有4种尺寸。它应该总是略大于它包含的图标。 例如，Font Awesome 5图标默认使用1em的字体大小（因为它继承了字体大小），但提供了额外的大小。

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

3.Font Awesome变量

Font Awesome还为以下对象提供修饰符类：

  • 固定宽度图标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>

4.Material Design Icons

以下是图标容器如何与Material Design Icons（MDI）一起使用。

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 还为对象提供以下修饰符类：

  • 明暗图标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

5.Ionicons图标

以下是图标容器如何与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

5.变量

Name
Type
Value
Computed Value
Computed Type 
$icon-dimensions
size
1.5rem
$icon-dimensions-small
size
1rem
$icon-dimensions-medium
size
2rem
$icon-dimensions-large
size
3rem
$icon-text-spacing
size
0.25em

返回头部

23222

问题反馈
返回顶部