Bootstrap Glyphicons

目標(biāo)

字體圖標(biāo)由于它的一些好處變得越來(lái)越流行了。在本教程中我們將討論如何通過(guò) Bootstrap 3 來(lái)使用和定制 Glyphicons。我們將解釋在后臺(tái)工作的 CSS 規(guī)則，這將讓您更好的了解圖標(biāo)字體的工作原理。這樣，您就能熟悉除了 Glyphicons 之外的任何圖標(biāo)字體設(shè)置。

什么是 Glyphicons

Glyphicons 是在 Web 項(xiàng)目中使用的圖標(biāo)字體。雖然，使用 Glyphicons 需要商業(yè)許可，但是您可以通過(guò)基于項(xiàng)目的 Bootstrap 來(lái)免費(fèi)使用這些圖標(biāo)。為了表示對(duì)圖標(biāo)作者的感謝，希望您在使用時(shí)加上 Glyphicon 網(wǎng)站 的鏈接。

獲取 Glyphicons

如果您已經(jīng)從 https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip 下載 Bootstrap 3（或者任何版本 3 之前的版本），您可以找到 dist 文件夾內(nèi)的 fonts 文件夾內(nèi)的 glyphicons。這里有四個(gè)文件 - glyphicons-halflings-regular.eot、glyphicons-halflings-regular.svg、glyphicons-halflings-regular.ttf 和 glyphicons-halflings-regular.woff。相關(guān)的 CSS 規(guī)則寫(xiě)在 dist 文件夾內(nèi)的 css 文件夾內(nèi)的 bootstrap.css 和 bootstrap-min.css 文件上。

如何使用 Glyphicons

一般來(lái)說(shuō)，我們可以得出通過(guò) Bootstrap 3 使用 Glyphicons 的常見(jiàn)語(yǔ)法如下

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

* 可以是任意代表特定圖標(biāo)的關(guān)鍵詞。下面的實(shí)例演示了如何通過(guò)按鈕使用它。

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

在線查看實(shí)例。

CSS 規(guī)則解釋

下面的 CSS 規(guī)則構(gòu)成 glyphicon class

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

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

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

然后，這里的

.glyphicon:empty {
  width: 1em;
}

是空的 glyphicon。

這里有 200 個(gè) class，每個(gè) class 針對(duì)一個(gè)圖標(biāo)。這些 class 的常見(jiàn)格式如下

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

比如，在我們實(shí)例中使用的 user 圖標(biāo)，它的 class 如下

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

我們已經(jīng)看到如何使用它，接下來(lái)我們看看如何定制 Glyphicons。

我們將以上面的實(shí)例開(kāi)始，并通過(guò)改變字體尺寸、顏色和應(yīng)用文本陰影來(lái)進(jìn)行定制圖標(biāo)。

下面是開(kāi)始的代碼

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

效果如下所示

定制字體尺寸

通過(guò)增加或減少圖標(biāo)的字體尺寸，您可以讓圖標(biāo)看起來(lái)更大或更小。

<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>

應(yīng)用文本陰影

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

定制 Glyphicons