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>

它將產生以下輸出：

列印頁面