Bootstrap - Glyphicons

本章将讨论Glyphicons，其用途和一些例子. Bootstrap以字体格式捆绑200个字形.现在让我们了解Glyphicons是什么.

什么是Glyphicons？

Glyphicons是您可以在Web项目中使用的图标字体.  Glyphicons Halflings 不是免费的，需要许可，但是他们的创建者已经将它们用于免费的Bootstrap项目费用.

"我们建议您在实际情况下向GLYPHICONS提供可选链接." -  Bootstrap Documentation

在哪里可以找到Glyphicons？

现在我们已经下载了Bootstrap 3.x版本，并从章节了解其目录结构href ="https://img01.yuandaxia.cn/Content/img/tutorials/bootstrap/bootstrap_environment_setup.htm">环境设置，可以在 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 .

用法

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

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