Bootstrap Glyphicons

这是一个包含单色图标的库，以光栅图像格式、矢量图像格式和字体形式提供。它以字体格式提供了超过 250 个字形。您可以在您的 Web 项目中使用这些字体。这些字形不是免费的，但是如果您在基于 Bootstrap 的项目中使用它们，则无需支付任何费用。

加载字体（库）

要加载 Bootstrap Glyphicons 库，请将以下行复制并粘贴到网页的 <head> 部分。

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

使用图标

Bootstrap Glyphicons 提供了许多图标。选择其中一个，并将图标类名称添加到 <body> 标签内的任何 HTML 元素中。在下面的示例中，我们使用了树的图标，其类名称为 tree-deciduous。

实时演示

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous">  </i>
   </body>
</html>

它将产生以下输出：

定义大小

您可以通过在 CSS 中定义其大小并在其后使用类名来增加或减小图标的大小，如下所示。在下面的示例中，我们已将大小定义为 6em。

实时演示

<html>
   <head>
      <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

它将产生以下输出

定义颜色

您可以使用 CSS 定义图标的颜色。以下示例演示了如何更改树图标的颜色。

实时演示

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em; color: blue;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

它将产生以下输出：

打印页面