Latest web development tutorials

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 = " http://cdn.static.w3big.com/libs/jquery/2.1.1/jquery.min.js " > </ script > <!-- 包含了所有編譯插件 --> < script src = " http://cdn.static.w3big.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 尝试一下