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>