目前，Font Awesome 中包含364个图标，是 Glyphicons 的 Bootstrap 版本的进两倍。 Font Awesome 图标是免费、开源的，而且也很方便在 Bootstrap 中使用。其主页地址为：
下面我们就来使用Font Awesome 图标。
(1) 打开Font Awesome的主页，找到下载地址。当然进入其Github链接下载代码：https://github.com/FortAwesome/Font-Awesome
(2) 解压缩下载到的文件，然后把其font 文件夹下的所有字体文件复制到我们的 font 文件夹下。
(3) 然后把其 less 文件夹下的所有文件辅助到我们的 less 文件夹下新建的 font-awesome文件夹下。
(4) 接着，在 __main.less 文件中导入 font-awesome.less 文件，以便文件规则编译到样式表中。
@import "bootstrap/glyphicons.less";
@import "font-awesome/font-awesome.less";
(5) Font Awesome 的 less 文件中的包含一个变量，指定了 Font Awesome 字体的路径。我们要确保该路径与项目文件夹结构一致。打开 Font Awesome 变量文件
font-awesome/variables.less ，确保@fa-font-path 变量的值是：../fonts；如下所示：
复制代码 代码如下:
@fa-font-path: "../fonts";
PS: 这里的路径是相对于编译得到的CSS文件而言的，它位于 css 文件夹中。
(6) 保存并编译 CSS。然后更新 Team 导航项的代码。
复制代码 代码如下:
<li><a href="#"><span></span> Team</a></li>
(7) 保存并刷新浏览器，可以看到结果：
PS:如果你看到的是一个奇怪的符号，或者什么都没有看到，那说明 Web 字体并没有应用。这时，要检查图标类是否正确（包括 fa 类），确保 Font Awesome 字体都在 fonts 文件夹中，而且 font-awesome/variables.less 中的路径也没有问题。
此刻，我们可以同时使用 Glyphicons ，也可以完全弃用它。为了减少代码冗余，咱们还是弃用它，只使用 Font Awesome字体。为此只需要两步：
(1) 把 __main.less 中导入 Glyphicons 字体的代码注释掉。
复制代码 代码如下:
//@import "bootstrap/glyphicons.less";@import "font-awesome/font-awesome.less";
(2) 然后把 html文档中的图标标记的类，改为 Font Awesome 图标对应的类名。
查看 Font Awesome 图标的页面，可以看到图标对应的类名。修改对应的导航项代码如下：
<li><a href="https://www.jb51.net/index.html"><span></span> Home</a></li> <li><a href="#"><span></span> Portfolio</a></li> <li><a href="#"><span></span> Team</a></li> <li><a href="#"><span></span> Contact</a></li>
显示效果如下：
12.调整传送带
关于传送带，我们主要还是使用 Bootstrap 默认的样式，同时对几个比较重要的地方进行定制。为此，和前面一样，我们复制一份 Bootstrap 的carousel.less 文件到less文件夹下，重命名为 _carousel.less，然后在 __main.less 更新其导入信息。下面我们就可以开始定制了。
12.1 把控件改成使用 Font Awesome 图标
如果你在前面就把 Glyphicons 字体删除了，那就会发现传送带左右两侧的“上一个”和“下一个”控件不见了。因为这两个图标就来自 Glyphicons 。我们可以让 Font Awesome 图标取而代之。
(1) 首先，更新 html 文档中的图标标记。找到带有 carousel-control 和 left、right 类的链接。
复制代码 代码如下:
<a ...
(2) 将 span 标签中的类修改为通用的 icon 类，再加上Font Awesome 图标类，如下所示：
<span></span>
...
<span></span>
(3) 接下来，在 _carousel.less 中添加新类选择符。先找到注释// Toggles ，然后添加我们的 .icon 类和注释：