Web图标教程

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提供了许多图标.选择其中一个，并将图标类的名称添加到<中的任何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>

Defining the Size

您可以通过在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>

Defining the Color

您可以使用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>