基本图标
要使用字体真棒图标，添加内以下行<head> HTML页面的部分：
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
注：无需下载或安装！
通过使用前缀把字体真棒图标fa和图标的名称。
例
下面的代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>结果是：
字体真棒旨在与内联元素被使用。 在<i>和<span>元素被广泛用于图标。
还要注意的是，如果你更改图标的容器中，图标更改的字体大小和颜色。 同样的事情也适用于阴影，和其他任何被使用CSS继承。
大图标
的fa-lg (33% increase) ， fa-2x ， fa-3x ， fa-4x ，或fa-5x类用于增加图标大小相对于它们的容器。
例
下面的代码：
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
结果是：
Tip:如果你的图标越来越顶部和底部砍掉，增加行高。
列表图标
在fa-ul和fa-li类用于替代默认的子弹无序列表。
例
下面的代码：
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List
icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>结果是：
- List icons
- List icons
- List icons
有边距和拉图标
在fa-border ， fa-pull-right或fa-pull-left类用于为上拉报价或物品的图标。
例
下面的代码：
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.结果是：
动画图标
在fa-spin类获取任何图标旋转，和fa-pulse类获取任何图标，8步旋转。
例
下面的代码：
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i
class="fa fa-spinner fa-pulse"></i>
结果是：
注意：IE8和IE9不支持CSS3动画。
旋转和翻转图标
在fa-rotate-*和fa-flip-*类用于旋转和翻转图标。
例
下面的代码：
<i class="fa fa-shield"></i>
<i class="fa fa-shield
fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield
fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>结果是：
堆积图标
要堆叠多个图标，使用fa-stack类的父目录， fa-stack-1x类的规则尺寸图标， fa-stack-2x的大图标。
的fa-inverse类可以用来作为一种替代图标的颜色。 您也可以大图标类添加到父，以进一步控制大小。
例
下面的代码：
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin
fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter
fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera
fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"
style="color:red;"></i>
</span>
fa-ban on fa-camera结果是：
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
固定宽度的图标
在fa-fw类用来在一个固定的宽度设置的图标。 当不同的图标宽度甩开对准这个类是很有用的。 特别有用引导的navlists和列表组。
例
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> 试一试» 引导
字体真棒还伟大工程的所有组件引导。