本文轉自：http://www.ijquery.cn/?p=377
一、介紹
采用這種字體，我們可以避免網站制作中采用好多圖片，一方面解決了瀏覽器的兼容性問題。另一方面，這些字體都是矢量字體，我們只要在調整這些圖標時，將他們的字體大小以及顏色，我們就可以解決很多不是圖片的圖標了。
二、使用原因
今天在用到jquery.mmenu.js過程中（手機上的單個按鈕菜單，具體將在下一節講到），也是從網上找到的一個簡單的demo，很簡單的，如下圖：
於是我把它拿下來進行研究，但是所有元素都拿下來了，就是有一個圖標不顯示，如下圖。
研究了半天，終於發現了問題所在！由此也進一步對CSS的字體有了進一步了解！現在分享與大家！demo如下
對於不太懂這款CSS的人，可以一步一步查看這款樣式進行分析研究！
第一步：准備工作
將font-face.css放在css目錄下，將放置fonts目錄在根目錄下，下邊放四個文件，分別是 glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff 。 如果不懂為什么，我建議看一看這篇博文，很有幫助的！《
CSS3 @font-face》 http://www.cnblogs.com/rubylouvre/archive/2011/06/19/2084875.html
第二步：引入HTML和CSS代碼粘貼下邊
<link href="css/font-face.css" rel="stylesheet" type="text/css"> <a href="#" class="glyphicon glyphicon-th-list"></a>
font-face.css 可以點擊這里進行下載。 http://www.ijquery.cn/css/font-face.css
第三步：將這個圖標按處理字體一樣用CSS處理一下就可以了。以下僅作參考。
<style type="text/css"> .f24{font-size:24px;} .cred{color:#FF0000;} .tdn{text-decoration:none;} </style> <a href="#" class="glyphicon glyphicon-th-list f24 cred tdn"></a>
三、完整版下載及使用
注意：我在前邊標的序號是為了讓大家更好的應用相應的 font-face.css ，更好地與后邊的CSS對應而這樣寫的！