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.cssbootstrap-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="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 包含了所有編譯插件 --> <script src="https://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>

在線定製字體圖標

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


圖標列表

圖標 類名 實例
glyphicon glyphicon-asterisk 嚐試一下
glyphicon glyphicon-plus 嚐試一下
glyphicon glyphicon-minus 嚐試一下
glyphicon glyphicon-euro 嚐試一下
glyphicon glyphicon-cloud 嚐試一下
glyphicon glyphicon-envelope 嚐試一下
glyphicon glyphicon-pencil 嚐試一下
glyphicon glyphicon-glass 嚐試一下
glyphicon glyphicon-music 嚐試一下
glyphicon glyphicon-search 嚐試一下
glyphicon glyphicon-heart 嚐試一下
glyphicon glyphicon-star 嚐試一下
glyphicon glyphicon-star-empty 嚐試一下
glyphicon glyphicon-user 嚐試一下
glyphicon glyphicon-film 嚐試一下
glyphicon glyphicon-th-large 嚐試一下
glyphicon glyphicon-th 嚐試一下
glyphicon glyphicon-th-list 嚐試一下
glyphicon glyphicon-ok 嚐試一下
glyphicon glyphicon-remove 嚐試一下
glyphicon glyphicon-zoom-in 嚐試一下
glyphicon glyphicon-zoom-out 嚐試一下
glyphicon glyphicon-off 嚐試一下
glyphicon glyphicon-signal 嚐試一下
glyphicon glyphicon-cog 嚐試一下
glyphicon glyphicon-trash 嚐試一下
glyphicon glyphicon-home 嚐試一下
glyphicon glyphicon-file 嚐試一下
glyphicon glyphicon-time 嚐試一下
glyphicon glyphicon-road 嚐試一下
glyphicon glyphicon-download-alt 嚐試一下
glyphicon glyphicon-download 嚐試一下
glyphicon glyphicon-upload 嚐試一下
glyphicon glyphicon-inbox 嚐試一下
glyphicon glyphicon-play-circle 嚐試一下
glyphicon glyphicon-repeat 嚐試一下
glyphicon glyphicon-refresh 嚐試一下
glyphicon glyphicon-list-alt 嚐試一下
glyphicon glyphicon-lock 嚐試一下
glyphicon glyphicon-flag 嚐試一下
glyphicon glyphicon-headphones 嚐試一下
glyphicon glyphicon-volume-off 嚐試一下
glyphicon glyphicon-volume-down 嚐試一下
glyphicon glyphicon-volume-up 嚐試一下
glyphicon glyphicon-qrcode 嚐試一下
glyphicon glyphicon-barcode 嚐試一下
glyphicon glyphicon-tag 嚐試一下
glyphicon glyphicon-tags 嚐試一下
glyphicon glyphicon-book 嚐試一下
glyphicon glyphicon-bookmark 嚐試一下
glyphicon glyphicon-print 嚐試一下
glyphicon glyphicon-camera 嚐試一下
glyphicon glyphicon-font 嚐試一下
glyphicon glyphicon-bold 嚐試一下
glyphicon glyphicon-italic 嚐試一下
glyphicon glyphicon-text-height 嚐試一下
glyphicon glyphicon-text-width 嚐試一下
glyphicon glyphicon-align-left 嚐試一下
glyphicon glyphicon-align-center 嚐試一下
glyphicon glyphicon-align-right 嚐試一下
glyphicon glyphicon-align-justify 嚐試一下
glyphicon glyphicon-list 嚐試一下
glyphicon glyphicon-indent-left 嚐試一下
glyphicon glyphicon-indent-right 嚐試一下
glyphicon glyphicon-facetime-video 嚐試一下
glyphicon glyphicon-picture 嚐試一下
glyphicon glyphicon-map-marker 嚐試一下
glyphicon glyphicon-adjust 嚐試一下
glyphicon glyphicon-tint 嚐試一下
glyphicon glyphicon-edit 嚐試一下
glyphicon glyphicon-share 嚐試一下
glyphicon glyphicon-check 嚐試一下
glyphicon glyphicon-move 嚐試一下
glyphicon glyphicon-step-backward 嚐試一下
glyphicon glyphicon-fast-backward 嚐試一下
glyphicon glyphicon-backward 嚐試一下
glyphicon glyphicon-play 嚐試一下
glyphicon glyphicon-pause 嚐試一下
glyphicon glyphicon-stop 嚐試一下
glyphicon glyphicon-forward 嚐試一下
glyphicon glyphicon-fast-forward 嚐試一下
glyphicon glyphicon-step-forward 嚐試一下
glyphicon glyphicon-eject 嚐試一下
glyphicon glyphicon-chevron-left 嚐試一下
glyphicon glyphicon-chevron-right 嚐試一下
glyphicon glyphicon-plus-sign 嚐試一下
glyphicon glyphicon-minus-sign 嚐試一下
glyphicon glyphicon-remove-sign 嚐試一下
glyphicon glyphicon-ok-sign 嚐試一下
glyphicon glyphicon-question-sign 嚐試一下
glyphicon glyphicon-info-sign 嚐試一下
glyphicon glyphicon-screenshot 嚐試一下
glyphicon glyphicon-remove-circle 嚐試一下
glyphicon glyphicon-ok-circle 嚐試一下
glyphicon glyphicon-ban-circle 嚐試一下
glyphicon glyphicon-arrow-left 嚐試一下
glyphicon glyphicon-arrow-right 嚐試一下
glyphicon glyphicon-arrow-up 嚐試一下
glyphicon glyphicon-arrow-down 嚐試一下
glyphicon glyphicon-share-alt 嚐試一下
glyphicon glyphicon-resize-full 嚐試一下
glyphicon glyphicon-resize-small 嚐試一下
glyphicon glyphicon-exclamation-sign 嚐試一下
glyphicon glyphicon-gift 嚐試一下
glyphicon glyphicon-leaf 嚐試一下
glyphicon glyphicon-fire 嚐試一下
glyphicon glyphicon-eye-open 嚐試一下
glyphicon glyphicon-eye-close 嚐試一下
glyphicon glyphicon-warning-sign 嚐試一下
glyphicon glyphicon-plane 嚐試一下
glyphicon glyphicon-calendar 嚐試一下
glyphicon glyphicon-random 嚐試一下
glyphicon glyphicon-comment 嚐試一下
glyphicon glyphicon-magnet 嚐試一下
glyphicon glyphicon-chevron-up 嚐試一下
glyphicon glyphicon-chevron-down 嚐試一下
glyphicon glyphicon-retweet 嚐試一下
glyphicon glyphicon-shopping-cart 嚐試一下
glyphicon glyphicon-folder-close 嚐試一下
glyphicon glyphicon-folder-open 嚐試一下
glyphicon glyphicon-resize-vertical 嚐試一下
glyphicon glyphicon-resize-horizontal 嚐試一下
glyphicon glyphicon-hdd 嚐試一下
glyphicon glyphicon-bullhorn 嚐試一下
glyphicon glyphicon-bell 嚐試一下
glyphicon glyphicon-certificate 嚐試一下
glyphicon glyphicon-thumbs-up 嚐試一下
glyphicon glyphicon-thumbs-down 嚐試一下
glyphicon glyphicon-hand-right 嚐試一下
glyphicon glyphicon-hand-left 嚐試一下
glyphicon glyphicon-hand-up 嚐試一下
glyphicon glyphicon-hand-down 嚐試一下
glyphicon glyphicon-circle-arrow-right 嚐試一下
glyphicon glyphicon-circle-arrow-left 嚐試一下
glyphicon glyphicon-circle-arrow-up 嚐試一下
glyphicon glyphicon-circle-arrow-down 嚐試一下
glyphicon glyphicon-globe 嚐試一下
glyphicon glyphicon-wrench 嚐試一下
glyphicon glyphicon-tasks 嚐試一下
glyphicon glyphicon-filter 嚐試一下
glyphicon glyphicon-briefcase 嚐試一下
glyphicon glyphicon-fullscreen 嚐試一下
glyphicon glyphicon-dashboard 嚐試一下
glyphicon glyphicon-paperclip 嚐試一下
glyphicon glyphicon-heart-empty 嚐試一下
glyphicon glyphicon-link 嚐試一下
glyphicon glyphicon-phone 嚐試一下
glyphicon glyphicon-pushpin 嚐試一下
glyphicon glyphicon-usd 嚐試一下
glyphicon glyphicon-gbp 嚐試一下
glyphicon glyphicon-sort 嚐試一下
glyphicon glyphicon-sort-by-alphabet 嚐試一下
glyphicon glyphicon-sort-by-alphabet-alt 嚐試一下
glyphicon glyphicon-sort-by-order 嚐試一下
glyphicon glyphicon-sort-by-order-alt 嚐試一下
glyphicon glyphicon-sort-by-attributes 嚐試一下
glyphicon glyphicon-sort-by-attributes-alt 嚐試一下
glyphicon glyphicon-unchecked 嚐試一下
glyphicon glyphicon-expand 嚐試一下
glyphicon glyphicon-collapse-down 嚐試一下
glyphicon glyphicon-collapse-up 嚐試一下
glyphicon glyphicon-log-in 嚐試一下
glyphicon glyphicon-flash 嚐試一下
glyphicon glyphicon-log-out 嚐試一下
glyphicon glyphicon-new-window 嚐試一下
glyphicon glyphicon-record 嚐試一下
glyphicon glyphicon-save 嚐試一下
glyphicon glyphicon-open 嚐試一下
glyphicon glyphicon-saved 嚐試一下
glyphicon glyphicon-import 嚐試一下
glyphicon glyphicon-export 嚐試一下
glyphicon glyphicon-send 嚐試一下
glyphicon glyphicon-floppy-disk 嚐試一下
glyphicon glyphicon-floppy-saved 嚐試一下
glyphicon glyphicon-floppy-remove 嚐試一下
glyphicon glyphicon-floppy-save 嚐試一下
glyphicon glyphicon-floppy-open 嚐試一下
glyphicon glyphicon-credit-card 嚐試一下
glyphicon glyphicon-transfer 嚐試一下
glyphicon glyphicon-cutlery 嚐試一下
glyphicon glyphicon-header 嚐試一下
glyphicon glyphicon-compressed 嚐試一下
glyphicon glyphicon-earphone 嚐試一下
glyphicon glyphicon-phone-alt 嚐試一下
glyphicon glyphicon-tower 嚐試一下
glyphicon glyphicon-stats 嚐試一下
glyphicon glyphicon-sd-video 嚐試一下
glyphicon glyphicon-hd-video 嚐試一下
glyphicon glyphicon-subtitles 嚐試一下
glyphicon glyphicon-sound-stereo 嚐試一下
glyphicon glyphicon-sound-dolby 嚐試一下
glyphicon glyphicon-sound-5-1 嚐試一下
glyphicon glyphicon-sound-6-1 嚐試一下
glyphicon glyphicon-sound-7-1 嚐試一下
glyphicon glyphicon-copyright-mark 嚐試一下
glyphicon glyphicon-registration-mark 嚐試一下
glyphicon glyphicon-cloud-download 嚐試一下
glyphicon glyphicon-cloud-upload 嚐試一下
glyphicon glyphicon-tree-conifer 嚐試一下
glyphicon glyphicon-tree-deciduous 嚐試一下