Icons

Bulma 与所有图标库兼容: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons 等.

Colors Yes

Sizes Yes

Variables Yes

icon 元素是任何 icon font 类型的容器，因为图标可能需要几秒钟才能加载，并且因为您想要图标占用空间，所以使用 icon 类作为可靠的容器可以防止页面在加载时"跳跃"。

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

黄色背景 仅用于演示目的，突出显示图标容器的区域。

默认情况下，图标容器将刚好占用 1.5rem x 1.5rem，图标本身的大小取决于您正在使用的图标库。例如，Font Awesome 5 图标库将继承字体的大小。

Colors | 颜色 #

由于图标是 文本形式 ，因此可以使用文字颜色修饰符来更改图标的颜色。

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

Sizes | 大小 #

Bulma 图标 容器有 4 种尺寸。它应该总是比它包含的图标稍大。例如，Font Awesome 5 图标库默认使用 1em （因为它继承了字体大小），但是也提供了更多大小以供选择。

Container class	Container size	Font Awesome 5 class	Icon size
`icon is-small`	`1rem x 1rem`	`fas`	`1em`
`icon`	`1.5rem x 1.5rem`	`fas`	`1em`
`icon`	`1.5rem x 1.5rem`	`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`
		`fas fa-3x`	`3em`

Font Awesome variations | Font Awesome 差异 #

Font Awesome also provides modifier classes for: Font Awesome 还为以下内容提供了修饰符：

固定宽度的图标
有边框的图标
动态图标
旋转 & 翻转图标
堆叠图标

Type	Font Awesome class	Result
Fixed width	`fas fa-fw`
Bordered	`fas fa-border`
Animated	`fas fa-spinner fa-pulse`
Rotated & flipped	`fas fa-shield-alt` `fas fa-shield-alt` `data-fa-transform="rotate-90"` `fas fa-shield-alt` `data-fa-transform="rotate-180"` `fas fa-shield-alt` `data-fa-transform="rotate-270"` `fas fa-shield-alt` `data-fa-transform="flip-h"` `fas fa-shield-alt` `data-fa-transform="flip-v"`
Stacked	`<span class="icon is-medium"> <span class="fa-stack"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-flag fa-stack-1x fa-inverse"></i> </span> </span>`
Stacked	`<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 | 材质设计图标 #

这里将会告诉您 icon 容器如何与 Material Design Icons 一起使用。

Container class	Container size	MDI class	Icon size
`icon is-small`	`1rem x 1rem`	`mdi`	`1em`
`icon`	`1.5rem x 1.5rem`	`mdi mdi-18px`	`18px`
`icon`	`1.5rem x 1.5rem`	`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 还为以下内容提供额外的修饰符：

亮色/暗色图标
旋转 & 翻转图标

Type	Material Design Icon class	Result
亮色	`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`

Open Iconic #

这里将会告诉您 icon 容器如何与 Open Iconic 一起使用。

Container class	Container size	Iconic class	Icon size
`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 #

这里将会告诉您 icon 容器如何与 Ionicons 一起使用。

Container class	Container size	Ionicon class	Icon size
`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 | 变量 #

你可以使用这些变量来 自定义 这些 element。只需要在导入 Bulma 之前设置这些变量学习如何开始.

Name	Default value
Name	Default value
`$icon-dimensions`	`1.5rem`
`$icon-dimensions-small`	`1rem`
`$icon-dimensions-medium`	`2rem`
`$icon-dimensions-large`	`3rem`

这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!