上一节:
下一节:

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