早上聽同僚介紹icomoon的圖示，自己上網查找用例，發現确實挺好用，隻需在網址： https://icomoon.io/app/ 上選擇相應圖示點選font設定，然後點選下載下傳。将下載下傳檔案解壓，然後将font檔案夾和style.css拷貝到項目中，引用css即可，作為以後參考
轉載了相關介紹：轉載自：http://blog.csdn.net/u013938465/article/details/50680468
最近項目大量用到字型圖示，大家也知道，字型圖示任意縮放不會失真，也大大減少請求數量，非常好用。以下将講解本人如何根據美工提供的.svg檔案生成字型圖示并應用。
借助一個線上生成工具：https://icomoon.io/app/#/select
1、進入網址：首頁面
2、建立一個圖集
3、添加.svg圖檔（可以使用現成的，也可以使用自定義的）
使用現成的點選頁面紅色的Add Icons...
使用自定義的直接拖拽進圖集即可添加
4、生成字型檔案
（1）選擇好要生成的圖示（自由選擇）
（2）點選底部的："Generate Font F"
可以自由命名
5、修改完成後，點選生成Font
下載下傳到壓縮檔案：
運用：将fonts檔案夾全部内容和style.css檔案放到相應的項目中。
根據css檔案下面生成的class類的名稱添加到html對應的節點上即可添加字型。
當然添加字型還需要設定font-size，也可以根據實際情況設定color改變其顔色。
轉載自:http://blog.csdn.net/goodgirl1991/article/details/50416974
icomoon圖示是一個超贊超實用的開源圖示系列，其圖示官網位址為https://icomoon.io/icons.html
好，接下來介紹如何将該系列圖示應用在web頁面。
下載下傳標明icomoon圖示
點選IcoMoon App，進入頁面後，選擇想要引入web頁面的圖示，并且點選edit按鈕後分别點選選擇的圖示進行編輯
編輯結束後，點選generate font按鈕
點選download下載下傳字型樣式檔案并從getCOde處可以獲得圖示的html轉義碼
web代碼的編寫
首先當然是需要将自定義字型樣式引入web頁面 [css] view plain copy
- @font-face{
- font-family:'icomoon';
- src:url('icomoon.eot');
- src:url('font/icomoon.eot?#iefix') format('embedded-opentype'),
- url('font/icomoon.woff') format('woff'),
- url('font/icomoon.ttf') format('truetype'),
- url('font/icomoon.svg#SofiaProLight') format('svg');
- font-weight:normal;
- font-style:normal;
- }
然後編寫html代碼，并描述指定标簽的css樣式，向該标簽中添加icomoon圖示。 [html] view plain copy
- <body>
- <div data-icon=""></div><!--在之前獲得的圖示html轉義碼，用來指定在該标簽處添加哪一圖示-->
- <div data-icon=""></div>
- </body>
[css] view plain copy
- div:after{<!--:before或者:after必寫，不然無法顯示出圖示-->
- font-family:'icomoon';
- content: attr(data-icon);<!--此處指定向标簽中添加哪一圖示-->
- }
通過以上步驟，圖示得以顯示