Bootstrap图标

使用Glyphicons图标库

Glyphicons 是在 Web 项目中使用的图标字体。通过Bootstrap可以非常方便的使用图标。
只需要添加以下代码：

<span class="glyphicon glyphicon-home"></span>

可以通过访问网页查找所需图标的代码http://getbootstrap.com/components/#glyphicons

使用Font Awesome图标库

首先需要自己添加Font Awesome图标库
参考（包含图标库）：http://www.bootcss.com/p/font-awesome/
添加代码：

<span class="icon fa fa-home"></span>

更加方便

调整导航栏图标颜色

图标所在代码如下：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="index.html"><span class="icon fa fa-home"></span>Home</a></li>
    <li><a href="#"><span class="icon fa fa-desktop"></span>Portfolio</a></li>
    <li><a href="#"><span class="icon fa fa-group"></span>Team</a></li>
    <li><a href="#"><span class="icon fa fa-envelope"></span>Contact</a></li>
    </ul>
</div>

更改导航栏图标颜色navbar.less，首先找到导航条默认样式的选择符.navbar-default，因为图标在li > a下面，所以进行如下更改：

  .navbar-nav {
    > li > a {
      color: @navbar-default-link-color;
      .icon{
        color:@gray-light;
      }

修改图标的悬停和活动颜色，需要在伪选择符&:hover和``&:focus后面添加icon类：
代码如下：

  .navbar-nav {
    > li > a {
      color: @navbar-default-link-color;
      .icon{
        color:@gray-light;
      }

      &:hover,
      &:focus,
      &:hover .icon, //added
      &:focus .icon{ //added
        color: @navbar-default-link-hover-color;
        background-color: @navbar-default-link-hover-bg;
      }

对于活动链接active，如下修改：

    > .active > a {
      &,
      &:hover,
      &:focus,
      .icon,         //added
      &:hover .icon, //added
      &:focus .icon{ //added
        color: @navbar-default-link-active-color;
        background-color: @navbar-default-link-active-bg;
      }
    }

即可实现。