icon 元素是任何类型 图标字体 的 容器。 因为图标可能需要几秒钟才能加载，并且因为您希望控制图标将占用的 空间，所以您可以使用 icon 类作为一个可靠的正方形容器，以防止页面在页面加载时 "跳跃"。
赞助
图标
兼容所有图标字体库，包括 Font Awesome 5
默认情况下，icon 容器将占用 正好 1.5rem x 1.5rem。 图标本身的大小取决于您使用的图标库。 例如，Font Awesome 5 图标将 继承 字体大小。
图标文本 #
您可以将 icon 与 文本 结合使用，使用 icon-text 包装器，只要 内部 的所有文本都包含在自己的 span 元素中
示例
主页
HTML
<span class="icon-text">
<span class="icon">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</span>您可以根据需要组合 尽可能多 的 icon 元素和文本元素
示例
巴黎 布达佩斯 布加勒斯特 伊斯坦布尔
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 是一个 inline-flex 元素，因此可以轻松地将其插入到任何 文本 段落中。
示例
很快发出了一份 晚餐 的邀请；本内特太太已经计划好了要用来展现她的持家能力的菜肴，这时收到了一封回信，推迟了所有的事情。宾利先生不得不在第二天到 城里 ，因此，无法接受他们的 邀请 ，等等。
本内特太太非常不安。她无法想象他在抵达赫特福德郡后这么快就有什么事要到城里去；她开始担心他可能会总是从一个地方 飞 到另一个地方，永远不会像他应该的那样在尼日斐花园安顿下来。
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>您也可以通过简单地使用 <div> 标签将 icon-text 变成一个 flex 元素
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>颜色 #
由于图标字体只是 文本，因此您可以使用 颜色助手 来更改图标的颜色。
示例
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
示例
信息 成功 警告 危险
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>尺寸 #
Bulma icon 容器有 4 种尺寸。 它应该始终比它包含的图标 略大。 例如，Font Awesome 5 图标默认使用 1em 的字体大小（因为它继承了字体大小），但提供了 附加尺寸。
| 容器类 | 容器尺寸 | Font Awesome 5 类 | 图标尺寸 | 结果 |
|---|---|---|---|---|
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 变体 #
Font Awesome 还为以下内容提供修饰符类
- 固定宽度图标
- 带边框的图标
- 动画图标
- 堆叠图标
| 类型 | Font Awesome 类 | 结果 |
|---|---|---|
| 固定宽度 |
fas fa-fw
|
|
| 带边框 |
fas fa-border
|
|
| 动画 |
fas fa-spinner fa-pulse
|
|
| 堆叠 |
|
|
|
Material Design Icons #
以下是如何将 icon 容器与 Material Design Icons 一起使用。
| 容器类 | 容器尺寸 | MDI 类 | 图标尺寸 | 结果 |
|---|---|---|---|---|
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 还为以下内容提供修饰符类
- 浅色和深色图标
- 旋转和翻转的图标
| 类型 | Material Design Icon 类 | 结果 |
|---|---|---|
| 浅色 |
mdi mdi-light
|
|
| 深色 |
mdi mdi-dark
|
|
| 浅色非活动颜色 |
mdi mdi-light mdi-inactive
|
|
| 深色非活动颜色 |
mdi mdi-dark mdi-inactive
|
|
| 翻转 |
mdi mdi-flip-h
mdi mdi-flip-v
|
|
| 旋转 |
mdi mdi-rotate-45
mdi mdi-rotate-90
mdi mdi-rotate-180
|
|
Ionicons #
以下是如何将 icon 容器与 Ionicons 一起使用。
| 容器类 | 容器尺寸 | Ionicon 类 | 图标尺寸 | 结果 |
|---|---|---|---|---|
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 和 CSS 变量 #
|
Sass 变量
|
CSS 变量
|
值
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
