引导Glyphicons 


自举雕文


这是一个单色图标库,可提供光栅图像格式,矢量图像格式以及字体。它提供了超过250个字形的字体格式。您可以在Web项目中使用这些字体。这些字形不是免费的,但是如果您不必花任何钱,以防您在基于Bootstrap的项目中使用它们。

加载字体(库)

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

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

使用图标

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

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

它将产生以下输出-

定义大小

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

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

它将产生以下输出:

定义颜色

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

<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>
   
 
   
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   

它将产生以下输出-

0



error: 内容受到保护 !!