200個icon：

這里說的圖標(biāo)就是Web制作中?？吹降男con圖標(biāo)，可以說這些小icon圖標(biāo)是一個優(yōu)秀Web中不可缺少的一部分，起到畫龍點睛的效果。在Bootstrap框架中也為大家提供了近200個不同的icon圖片，而這些圖標(biāo)都是使用CSS3的@font-face屬性配合字體來實現(xiàn)的icon效果。

放心使用：

在具體介紹Bootstrap的icon圖標(biāo)之前，我們首先要感謝glyphicons.com網(wǎng)站，因為Bootstrap框架中圖標(biāo)都是glyphicons.com這個商業(yè)網(wǎng)站提供的，并且免費授權(quán)給Bootstrap框架使用，所以大家可以放心使用在自己的項目當(dāng)中。

Bootstrap框架將內(nèi)部樣式也提取出來：
1、LESS版本：對應(yīng)源文件為glyphicons.less文件
2、Sass版本：對應(yīng)源文件為_glyphicons.scss文件
3、編譯后的Bootstrap版本：查看bootstrap.css文件第2375行～第2992行

原理分析：

Bootstrap框架中的圖標(biāo)都是字體圖標(biāo)，其實現(xiàn)原理就是通過@font-face屬性加載了字體。
/*源碼請查看bootstrap.css文件第2357行～第2380行*/

@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');
}

大家或許會問，這些字體我去哪里獲取。如果你是從前面一直閱讀過來，我們在介紹文件結(jié)構(gòu)那一節(jié)就已介紹過。在Bootstrap框架中有一個fonts的目錄，這個目錄中提供的字體文件就是用于制作icon的字體文件。
自定義完字體之后，需要對icon設(shè)置一個默認(rèn)樣式，在Bootstrap框架中是通過給元素添加“glyphicon”類名來實現(xiàn)，然后通過偽元素“:before”的“content”屬性調(diào)取對應(yīng)的icon編碼：
/*源碼請查看bootstrap.css文件第2381行～第2992行*/

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
….