9.1.4　导航上的图标

在导航菜单上显示icon图标的方式与4.1节Bootstrap默认的使用方式一样（即使用带有nav nav-pills nav-stacked样式的ul列表），唯一不同的是，Font Awesome也可以在普通的nav样式上使用。示例如下（.icon-fixed-width用于增大字体，和图标保持一致）：

  1. <ul class="nav ">
  2.     <li class="active"><a href="#"><i class="icon-fixed-width icon-home">
  3.     </i> Home</a></li>
  4.     <li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li>
  5.     <li><a href="#"><i class="icon-fixed-width icon-pencil"></i>
  6.         Applications</a></li>
  7.     <li><a href="#"><i class="icon-fixed-width icon-cogs"></i> Settings
  8.         </a></li>
  9. </ul>

上述示例的运行效果如图9-4所示。

9.1.4　导航上的图标 - 图1 图9-4　导航上的icon显示效果