Glyphicons（Glyphicons）

本章将讨论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文件中。

用法 (Usage)

要使用图标，只需在代码中的任何位置使用以下代码即可。 在图标和文本之间留一个空格以进行正确的填充。

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