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>

在線定製字體圖標

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

圖標列表