Bootstrap字体图标

1.若要使用图标，直接引入

//显示一个放大镜的查找图标
<span class="glyphicon glyphicon-search"></span>

//显示uesr的大按钮
<button type="button" class="btn btn-default btn-lg">//标准默认的按钮，大按钮
  <span class="glyphicon glyphicon-user"></span> User//引入一个图标，图标上显示为User
</button>

2.带有导航栏的字体图标

//首先设置导航栏的位置，然后inverse，背景变成黑色
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">          
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
          //首页设置为active，显示为白色，其他为灰色。当鼠标经过时变为白色
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
            <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
            <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div>

3.定制字体图标

//通过增加图标的字体尺寸，是图标看起来更大
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

//改变字体的颜色
<button type="button" class="btn btn-primary btn-lg" style="color:color:#CC3333;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

//应用文本阴影
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>