200個icon：

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

放心使用：

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

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

原理分析：

Bootstrap框架中的圖標都是字體圖標，其實現原理就是通過@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');
}

大家或許會問，這些字體我去哪里獲取。如果你是從前面一直閱讀過來，我們在介紹文件結構那一節就已介紹過。在Bootstrap框架中有一個fonts的目錄，這個目錄中提供的字體文件就是用于制作icon的字體文件。
自定義完字體之后，需要對icon設置一個默認樣式，在Bootstrap框架中是通過給元素添加“glyphicon”類名來實現，然后通過偽元素“:before”的“content”屬性調取對應的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";
}
….