Bootstrap - Glyphicons（Bootstrap圖示字型）

本章將討論 Glyphicons，其用途和一些示例。Bootstrap 包含 200 個字型格式的圖示。讓我們現在瞭解 Glyphicons 是什麼。

什麼是 Glyphicons？

Glyphicons 是您可以用在 Web 專案中的圖示字型。Glyphicons Halflings 不是免費的，需要許可證，但是其建立者已將其免費提供用於 Bootstrap 專案。

“為了表示感謝，我們建議您在實際情況下儘可能包含一個可選的連結回到 GLYPHICONS。” — Bootstrap 文件

在哪裡可以找到 Glyphicons？

現在我們已經下載了 Bootstrap 3.x 版本，並從章節 環境配置 瞭解了其目錄結構，可以在 `fonts` 資料夾中找到 glyphicons。其中包含以下檔案：

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.svg
• glyphicons-halflings-regular.ttf
• glyphicons-halflings-regular.woff

相關的 CSS 規則位於 `dist` 資料夾的 `css` 資料夾內的 `bootstrap.css` 和 `bootstrap-min.css` 檔案中。您可以點選此連結檢視可用的 glyphicons GLYPHICONS。

用法

要使用這些圖示，只需在程式碼中的任何位置使用以下程式碼即可。圖示和文字之間留一個空格以獲得正確的填充。

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

以下示例演示了這一點：

<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>
</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>