Bootstrap 字體圖示(Glyphicons)

本章將講解字體圖示(Glyphicons)，並通過一些實例瞭解它的使用。Bootstrap 捆綁了 200 多種字體格式的字形。首先讓我們先來理解一下什麼是字體圖示。

什麼是字體圖示？

字體圖示是在 Web 專案中使用的圖示字體。雖然，Glyphicons Halflings 需要商業許可，但是您可以通過基於專案的 Bootstrap 來免費使用這些圖示。

為了表示對圖示作者的感謝，希望您在使用時加上 GLYPHICONS 網站的鏈接。

獲取字體圖示

我們已經在 環境安裝 章節下載了 Bootstrap 3.x 版本，並理解了它的目錄結構。在 fonts 檔夾內可以找到字體圖示，它包含了下列這些檔：

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.svg
• glyphicons-halflings-regular.ttf
• glyphicons-halflings-regular.woff

相關的 CSS 規則寫在 dist 檔夾內的 css 檔夾內的 bootstrap.css 和 bootstrap-min.css 檔上。

字體圖示列表

點擊這裏，查看可用的字體圖示列表。

CSS 規則解釋

下麵的 CSS 規則構成 glyphicon class。

所以 font-face 規則實際上是在找到 glyphicons 地方聲明 font-family 和位置。

.glyphicon class 聲明一個從頂部偏移 1px 的相對位置，呈現為 inline-block，聲明字體，規定 font-style 和 font-weight 為 normal，設置行高為 1。除此之外，使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 獲得跨流覽器的一致性。

然後，這裏的

.glyphicon:empty {
  width: 1em;
}

是空的 glyphicon。

這裏有 200 個 class，每個 class 針對一個圖示。這些 class 的常見格式如下：

.glyphicon-keyword:before {
  content: "hexvalue";
}

比如，使用的 user 圖示，它的 class 如下：

.glyphicon-user:before {
  content: "\e008";
}

用法

如需使用圖示，只需要簡單地使用下麵的代碼即可。請在圖示和文本之間保留適當的空間。

<span class="glyphicon glyphicon-search"></span>

下麵的實例演示了如何使用字體圖示：

結果如下所示：

帶有字體圖示的導航欄

定制字體圖示

我們已經看到如何使用字體圖示，接下來我們看看如何定制字體圖示。

我們將以上面的實例開始，並通過改變字體尺寸、顏色和應用文本陰影來進行定制圖示。

下麵是開始的代碼：

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

效果如下所示：

定制字體尺寸

通過增加或減少圖示的字體尺寸，您可以讓圖示看起來更大或更小。

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

定制字體顏色

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

應用文本陰影

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

線上定制字體圖示

點擊這裏，定制字體圖示 »

圖示列表