本章將講解字體圖標(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 {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 規則實際上是在找到 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>

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

<p><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-attributes"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-order"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-order-alt"></span></button> </p> <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-user"></span> User </button> <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-user"></span> User </button> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user"></span> User </button>

結果如下所示：

---

帶有字體圖標的導航欄

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li><li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li><li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li></ul></div><!-- /.nav-collapse --></div><!-- /.container --> </div> <!-- jQuery (Bootstrap 插件需要引入) --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 包含了所有編譯插件 --> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

定制字體圖標

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

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

下面是開始的代碼：

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

圖標列表

?

轉載于:https://www.cnblogs.com/lc1776/p/9213115.html

總結

以上是生活随笔為你收集整理的Bootstrap 字体图标(Glyphicons)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。