BootStrap-CSS樣式_佈局元件_字型圖示(Glyphicons)
什麼是字型圖示？
字型圖示是在 Web 專案中使用的圖示字型。雖然，Glyphicons Halflings 需要商業許可，但 是您可以通過基於專案的 Bootstrap 來免費使用這些圖示。
獲取字型圖示
我們下載了 Bootstrap 3.x 版本，並理解了它的目錄結構。在 fonts 資料夾內可以找到字型圖示， 它包含了下列這些檔案：
1.glyphicons-halflings-regular.eot
2. glyphicons-halflings-regular.svg
3. glyphicons-halflings-regular.ttf
4. glyphicons-halflings-regular.woff
相關的 CSS 規則寫在 dist 資料夾內的 css 資料夾內的 bootstrap.css 和 bootstrap-min.css 檔案上。
字型圖示列表
類似於下：
更多請檢視：http://www.w3cschool.cc/try/demo_source/bootstrap3-glyph-icons.htm
線上定製自己的圖示：http://www.w3cschool.cc/try/demo_source/bootstrap-glyph-customization.htm
CSS 規則解釋
下面的 CSS 規則構成 glyphicon class。
所以 font-face 規則實際上是在找到 glyphicons 地方宣告 font-family 和位置。
.glyphicon class 宣告一個從頂部偏移 1px 的相對位置，呈現為 inline-block，宣告字型，規定 font-style 和 font-weight 為 normal，設定行高為 1。除此之外，使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 獲得跨瀏覽器的一致性。
這裡有 200 個 class，每個 class 針對一個圖示。這些 class 的常見格式如下：
比如，使用的 user 圖示，它的 class 如下：
用法
如需使用圖示，只需要簡單地使用下面的程式碼即可。請在圖示和文字之間保留適當的空間。
<span class="glyphicon glyphicon-user"></span>
程式碼例項
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>字型圖示</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body style="padding:50px;">
<!--1. 按鈕應用字型圖示-->
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-circle-arrow-left"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</button>
</p>
<p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> User
</button>
</p>
<!--2. 為導航欄應用字型圖示-->
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation(導航)</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
</li>
<li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a>
</li>
<li><a href="#support"><span class="glyphicon glyphicon-headphones"></span> Support</a>
</li>
</ul>
</div>
</div>
</div>
<!--3. 定製字型圖示-->
<button type="button" class="btn btn-primary btn-lg" style="font-size:50px">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
<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>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>顯示效果：
