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 的常見格式如下：

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

用法

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

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

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

帶有字體圖標的導航欄

定製字體圖標

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

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

下面是開始的代碼：

傚果如下所示：

定製字體尺寸

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

定製字體顏色

應用文本陰影

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

在線定製字體圖標

點擊這里，定製字體圖標 »

圖標列表