将Font Awesome字体图标装进页面总共分两步：
第一步把冰箱门打开：引用样式 <link rel="stylesheet" href="http://www.okbase.net/file/link?u=http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css">
第二步把图标装进去：用<i>标签显示图标
Font Awesome4.5特性：
一个字体文件， 605 个图标
一个字体文件包含了所有图标。Font Awesome 助你完整表达web页面上每个动作的含义。
不依赖JavaScript
因为不需要JavaScript所以有更好的兼容性
用CSS控制样式
用CSS能非常容易的改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性。
无限缩放
矢量图意味着每个图标都能在所有大小的屏幕上完美呈现。
个人、商业均可自由使用
Font Awesome是完全免费的，无论个人还是商业使用。
支持IE7+
Font Awesome支持IE7及以上浏览器。不过你要是必须用在这种过时的浏览器上话，我只能表示同情！
如需兼容IE浏览器，可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。
<!--[if IE 7]>
<link rel="stylesheet" href="http://www.okbase.net/file/link?u=assets/css/font-awesome-ie7.min.css">
<![endif]-->
在Retina屏幕上也能完美呈现
Font Awesome 中包含的都是矢量图标，在高分辨率的显示器上也能完美呈现。
和其它框架完美配合
Font Awesome是完全从头设计的整套图标，完全和Bootstrap 等其它框架兼容.
兼容屏幕阅读器
Font Awesome 不会阻止屏幕阅读器，这和其他图标字体的行为方式完全不同。
图标样式
基本图标
<i class="fa fa-flag"></i> fa-flag
固定宽度图标
使用fa-fw，例如：
<div class="list-group">
<a class="list-group-item" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
大图标(相对于容器大小，按33%增长)：fa-lg,fa-2x,fa-3x,fa-4x,fa-5x
<i class="fa fa-coffee fa-lg">fa-coffee</i>
<i class="fa fa-coffee fa-2x">fa-coffee</i>
列表图标
使用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-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
边框和引号
使用fa-border 和 fa-pull-right（右引号）或 fa-pull-left（左引号）
例如：
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
旋转图标
使用fa-spin类旋转图标,使用class fa-pulse可以使图标以8步为周期进行旋转。可以完美执行旋转动画的图标有：fa-spinner，fa-refresh和fa-cog。
<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>
堆叠图标
要将多个图标堆叠在一起，可以在父元素上使用class fa-stack，fa-stack-1x是正常的图标尺寸，fa-stack-2x是大尺寸的图标。fa-inverse可以反转图标的颜色。在父元素还可以使用fa-lg等图标尺寸来设置图标的尺寸。
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<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"></i>
</span>
fa-ban on fa-camera
在Bootstrap 3中使用
Font Awesome字体图标可以完美的和Bootstrap结合使用。
<a class="btn btn-danger" href="http://www.okbase.net/file/link?u=#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="http://www.okbase.net/file/link?u=#">
<i class="fa fa-cog"></i> Settings</a>
<a class="btn btn-lg btn-success" href="http://www.okbase.net/file/link?u=#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.4.0</a>
<div class="btn-group">
<a class="btn btn-default" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-align-justify"></i></a>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
<div class="btn-group open">
<a class="btn btn-primary" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="http://www.okbase.net/file/link?u=#">
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.okbase.net/file/link?u=#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="http://www.okbase.net/file/link?u=#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="http://www.okbase.net/file/link?u=#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="http://www.okbase.net/file/link?u=#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
一个完整的例子
<html> <head> <title>Font Awesome的使用方法</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script> <link href="http://www.okbase.net/file/link?u=http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://www.okbase.net/file/link?u=http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css"> <div class="col-md-3 col-sm-4"> <div class="list-group"> <a class="list-group-item" href="http://www.okbase.net/file/link?u=http://www.okbase.net" target="blank"><i class="fa fa-home fa-fw"></i> Home</a> <a class="list-group-item" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-book fa-fw"></i> Library</a> <a class="list-group-item" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-pencil fa-fw"></i> Applications</a> <a class="list-group-item" href="http://www.okbase.net/file/link?u=#"><i class="fa fa-cog fa-fw"></i> Settings</a> </div> </div> <i class="fa fa-flag"></i> fa-flag <i class="fa fa-coffee fa-lg">fa-coffee</i> <i class="fa fa-coffee fa-2x">fa-coffee</i> </body> </html>