1.Bootstrap的字體圖標
字體圖標是web項目中使用的圖標字體。
2.@font-face的意義和使用（如何引用這些字體圖標）
@font-face使得設計師可以把自定義的字體顯示在網頁上，而不用擔心用戶的主機上沒有這個字體而無法顯示。
通過@font-face方法，可以把自定義的字體從服務器或者字體來源處下載到用戶主機上。
以下代碼來自於：點擊這里
1 @font-face { 2 font-family: DeliciousRoman; 3 src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf'); //字體的外部來源 4 }
1 p { 2 font-family: DeliciousRoman, Helvetica, Arial, sans-serif; //這樣就可以引用字體 3 }
或者你的字體就在你的服務器上
1 @font-face { 2 font-family: DeliciousRoman; 3 src: url('…/Delicious-Roman.otf'); 4 }
3.使用字體圖標的方法
1 <!DOCTYPE html><html><head> 2 <title>Bootstrap 實例 - 如何使用字體圖標</title> 3 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 4 <script src="/scripts/jquery.min.js"></script> 5 <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><p> 6 <button type="button" class="btn btn-default"> 7 <span class="glyphicon glyphicon-sort-by-attributes"></span> 8 </button> 9 <button type="button" class="btn btn-default"> 10 <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> 11 </button> 12 <button type="button" class="btn btn-default"> 13 <span class="glyphicon glyphicon-sort-by-order"></span> 14 </button> 15 <button type="button" class="btn btn-default"> 16 <span class="glyphicon glyphicon-sort-by-order-alt"></span> 17 </button></p><button type="button" class="btn btn-default btn-lg"> 18 <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-sm"> 19 <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-xs"> 20 <span class="glyphicon glyphicon-user"></span> User</button></body></html>
PS：關於字體圖標無法顯示的問題：
網上眾說紛紜，有大神說是因為平常引用bootstrap.min.css的時候是引用的部分，沒有把fonts文件夾下的字體關聯進去，但具體的解決方法我嘗試了沒有成功。我的解決方法是采用cdn提供的bootstrap.min.css。比如：我引用的是百度cdn下的：
http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css
這樣圖標就可以正常顯示了。
4.定制自己的字體
如果對引用的字體不滿意，我們可以在它的基礎上修改的style屬性來獲得自己想要的字體