Bootstrap 字形

这是一个单色图标库，提供光栅图像格式、矢量图像格式和字体。它提供了超过 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-decidious。

现场演示

<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 中定义图标的大小并将其与类名称一起使用来增大或减小图标的大小，如下所示。在下面的示例中，我们将尺寸定义为 6 em。

现场演示

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

它将产生以下输出 -