200個(gè)icon：

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

放心使用：

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

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

原理分析：

Bootstrap框架中的圖標(biāo)都是字體圖標(biāo)，其實(shí)現(xiàn)原理就是通過(guò)@font-face屬性加載了字體。
/*源碼請(qǐng)查看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');
}

大家或許會(huì)問(wèn)，這些字體我去哪里獲取。如果你是從前面一直閱讀過(guò)來(lái)，我們?cè)诮榻B文件結(jié)構(gòu)那一節(jié)就已介紹過(guò)。在Bootstrap框架中有一個(gè)fonts的目錄，這個(gè)目錄中提供的字體文件就是用于制作icon的字體文件。
自定義完字體之后，需要對(duì)icon設(shè)置一個(gè)默認(rèn)樣式，在Bootstrap框架中是通過(guò)給元素添加“glyphicon”類名來(lái)實(shí)現(xiàn)，然后通過(guò)偽元素“:before”的“content”屬性調(diào)取對(duì)應(yīng)的icon編碼：
/*源碼請(qǐng)查看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";
}
….