图标

使用样式类icon 生成一个方形inline-block。

<i class="icon fa">&#xf004;</i>

<i class="icon fa fa-heart"></i>

使用 icon-lg (33%递增)、icon-2x、 icon-3x、icon-4x，或者 icon-5x 类来放大图标。

<i class="fa icon-lg">&#xf083;</i>
<i class="fa icon-2x">&#xf083;</i>
<i class="fa icon-3x">&#xf083;</i>
<i class="fa icon-4x">&#xf083;</i>
<i class="fa icon-5x">&#xf083;</i>

Home Library Applications Settings

使用 icon-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。尤其在列表或导航时起到重要作用。

<div class="list-group">
	<a class="list-group-item" href="#"><i class="fa icon-fw">&#xf015;</i> Home</a>
	<a class="list-group-item" href="#"><i class="fa icon-fw">&#xf02d;</i> Library</a>
	<a class="list-group-item" href="#"><i class="fa icon-fw">&#xf040;</i> Applications</a>
	<a class="list-group-item" href="#"><i class="fa icon-fw">&#xf013;</i> Settings</a>
</div>

使用 icon-spin 类来使任意图标旋转，现在您还可以使用 icon-pulse 来使其进行8方位旋转。尤其适合。

<i class="fa icon-spin">&#xf110;</i>
<i class="fa icon-spin">&#xf1ce;</i>
<i class="fa icon-spin">&#xf013;</i>
<i class="fa icon-spin">&#xf021;</i>
<i class="fa icon-pulse">&#xf110;</i>

CSS3动画不支持IE9以下。

normal
icon-rotate-90
icon-rotate-180
icon-rotate-270
icon-flip-horizontal
icon-flip-vertical

若要对图标进行任意旋转和翻转, 可以使用 icon-rotate-* 和 icon-flip-* 类。

<i class="icon fa">&#xf132;</i>
<i class="icon fa icon-rotate-90">&#xf132;</i>
<i class="icon fa icon-rotate-180">&#xf132;</i>
<i class="icon fa icon-rotate-270">&#xf132;</i>
<i class="icon fa icon-flip-horizontal">&#xf132;</i>
<i class="icon fa icon-flip-vertical">&#xf132;</i>

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

如果想要将多个图标组合起来，使用 icon-stack 类作为父容器， icon-stack-1x 作为正常比例的图标， icon-stack-2x 作为大一些的图标。还可以使用 icon-inverse 类来切换图标颜色。您可以在父容器中通过添加大图标类来控制整体大小。

<span class="fa-stack icon-lg">
	<i class="fa icon-stack-2x">&#xf096;</i>
	<i class="fa icon-stack-1x">&#xf099;</i>
</span>
fa-twitter on fa-square-o<br>
<span class="icon-stack icon-lg">
	<i class="fa icon-stack-2x">&#xf111;</i>
	<i class="fa icon-stack-1x icon-inverse">&#xf024;</i>
</span>
fa-flag on fa-circle<br>
<span class="icon-stack icon-lg">
	<i class="fa icon-stack-2x">&#xf0c8;</i>
	<i class="fa icon-stack-1x icon-inverse">&#xf120;</i>
</span>
fa-terminal on fa-square<br>
<span class="icon-stack icon-lg">
	<i class="fa icon-stack-1x">&#xf030;</i>
	<i class="fa icon-stack-2x text-danger">&#xf05e;</i>
</span>
fa-ban on fa-camera

使用 aria-hidden 可以禁止屏幕朗读工具作用。使用 aria-label可以让屏幕朗读工具读指定的东西。

<button type="button" class="btn btn-default" aria-label="Left Align">
	<i class="fa" aria-hidden="true">&#xf036;</i>
</button>
<button type="button" class="btn btn-default">
	<i class="fa" aria-hidden="true">&#xf005;</i> Star
</button>

Ting Web UI

基本图标

大图标

固定宽度

动画

旋转和翻转

组合使用

图标的可访问性