Bootstrap 字体图标使用案例

字体图标使用案例

图标有很多种用途，比如按钮组、按钮、导航、表单输入框中的小图标等。在任何需要的地方，你都可以使用这些图标来设计出漂亮的界面。1、按钮组

<div class="btn-toolbar">

  <div class="btn-group">

    <a class="btn" href="#"><i class="icon-align-left"></i></a>

    <a class="btn" href="#"><i class="icon-align-center"></i></a>

    <a class="btn" href="#"><i class="icon-align-right"></i></a>

    <a class="btn" href="#"><i class="icon-align-justify"></i></a>

  </div>

</div>

效果如图 3‑63所示：

图3-63 按钮组中使用字体图标Glyphicons2、按钮

<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>

<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>

<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

效果如图 3‑64所示：

图3-64 按钮中使用字体图标Glyphicons3、导航

<ul class="nav nav-list">

  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>

  <li><a href="#"><i class="icon-book"></i> Library</a></li>

  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>

  <li><a href="#"><i class="i"></i> Misc</a></li>

</ul>

效果如图 3‑65所示：

图3-65 导航菜单中使用字体图标Glyphicons4、表单输入框

<div class="control-group">

  <label class="control-label" for="inputIcon">Email address</label>

  <div class="controls">

    <div class="input-prepend">

      <span class="add-on"><i class="icon-envelope"></i></span>

      <input class="span2" id="inputIcon" type="text">

    </div>

  </div>

</div>

效果如图 3‑66所示：

图3-66 表单控件中使用字体图标Glyphicons


版权声明：本文出自 歪脖网 的《Bootstrap教程》，欢迎在线阅读，并提出宝贵意见。