用字體在網頁中畫Icon圖標

第一步，下載。IcoMoon網站選擇字體圖標並下載，解壓後將fonts文件夾放在工程目錄下。fonts文件夾內有四種格式的字體文件：

注：因爲瀏覽器對每種字體的支持程度不一致，要想在全部瀏覽器中都顯示字體圖標，必須同時引入這些字體文件。

第二步，使用@font-face規則。在樣式文件中自定義字體

@font-face{ font-family:'imooc-icon';/*本身取的名稱*/ src:url("fonts/icomoon.eot") format("embedded-opentype"),/*後綴爲eot,format對應的字符串*/ url("fonts/icomoon.ttf") format("truetype"), url("fonts/icomoon.woff") format("woff"), url("fonts/icomoon.svg") format("svg"); font-weight:normal; font-style:normal; }

第三步，顯示字體圖標。好比要在span標籤上顯示字體圖標，首先打開以前下載的解壓後的字體文件夾，點擊裏面的demo.html，得到圖標編碼。

在span標籤裏寫進 &#x圖標編碼; 如右圖：
並在樣式裏設置該span標籤的字體爲咱們自定義的字體名稱。

最後，優化和兼容。爲了兼容IE，對@font-face規則做出改進。

爲了得到更好的顯示效果，須要在span樣式裏再加入一些代碼。

接下來，介紹第二種方式使用字體圖標。
用字體圖標的名稱做爲類名，並在相應標籤上添加這個類名。代碼片斷以下：

.icon-film:before{
    content:'\e913';/*注意這裏用的是反斜線*/
}
<span class="icon-film"></span>

注：在下載字體圖標時，能夠點擊網站頂部preferences按鈕進行參數設置，下載完後，打開裏面的css文件，有可供直接使用的代碼。

參考資料：慕課網-用字體在網頁中畫Icon圖標