概要：1.如何使用IcoMoon將矢量圖轉換成Web字體；2.如何使用生成的字體通過css應用到Web頁面中。
使用字體圖標的優勢
- 適用性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍大小的圖像）要小。一旦圖標字體加載了，你的圖標就會馬上渲染出來，不需要下載一個圖像。
- 可擴展性：圖標字體可以用過font-size屬性設置其任何大小。這使您能夠隨時輸出不同大小的圖標，然而，使用位圖，你必須得為每個不同大小的圖像輸出一個不同文件。
- 靈活性：文字效果可以很容易地應用到你的圖標上，包括顏色，陰影和翻轉等效果。他們還可以在任何背景下顯示。
- 兼容性：網頁字體支持所有現代瀏覽器，包括IE低版本。
創建圖標字體的方法
目前為止，最簡單的方法是使用Keyamoon制作的一個Web應用程序IcoMoon，可以解決字符轉換成Web字體的所有麻煩。
具體步驟
1.設計制作SVG圖標
首先，你需要能創建矢量圖標的程序，並且能夠找到輸出SVG格式，比如“Illustrator”或者“iNkscape”。
當你設計的時候，你可以使用任何你喜歡的顏色，但是圖標必須是一個純色。確保每個圖標的尺寸大小是相同的。
仔細檢查每一個圖標，以確保它沒有缺陷——細節在小尺寸上是完全的，當你放大的時候小的缺陷就能被發現。在所示圖標，我需要刪除參差不齊的路徑。
在Illustrator中，使用Pathfinder工具統一層疊元素，減去前面元素，比如這些圖標中的星星圖標。
選擇一個圖標，並將它復制粘貼到一個新的文檔場景中（例如200px X 200px）。縮放也是符合。你可能會發現它有一個基線尺寸的設置。使用彩色的圖標，比如說在白色的背景中使用黑色的圖標。
選擇菜單“文件”中“保存”，並選擇將文件保存成“SVG”格式。使用默認的SVG設置。
2.導入到IcoMoon
打開IcoMoon Web app。導入一個圖標，點擊“Imort icons”按鈕，然后選擇您想要添加的SVG文件——您也可以一次添加多個文件。這些圖標將會出現在“Your Custom Icons”區域中。如果他們是高亮的黃色顯示，表示這些圖標是你將要創建的圖標字體。在這個例子中，你可以看到，我不僅導出我自己創建的圖標，我還在“Mini-icons”中添加了別的圖標。
亦可使用app自帶的圖標。
3.從IcoMoon中導出字體
點擊左上角的功能按鈕欄，可分別對圖標進行選中，刪除，移動以及編輯操作。
編輯如圖：
當你都准備好了，點擊屏幕底部的“Font”按鈕開始生成字體。
4.下載字體文件
單擊“Download”下載字體包到你的電腦上。fonts文件夾包含了字體本身（woff,eot,ttf格式），以及一個HTML示例頁面和相應的CSS。甚至還有一個javascript文件和一個解決方法，如果你需要支持IE或IE7。
將font文件夾復制到你的網站，為你的項目添加字體。你需要從style.css文件中復制CSS樣式，並粘貼到你網站的CSS文件中，但是我的方法是將它重命名為fonts.css，並保持他作為一個單獨的CSS文件。你需要的時候在把這個CSS文件引入到你的HTML中。
<link rel="stylesheet" href="fonts.css" />
5、調用字體
正如你看到的樣本文件index.html，通過類名可以調用。
例如，如下圖標在fonts.css中對應的class是icon-home
.icon-home:before {
content: "\e900";
}
在html中通過class調用。
<span class="icon-home"></span>
參考 http://www.cnblogs.com/hongchenok/p/3833583.html
http://www.w3cplus.com/css3/how-to-turn-your-icons-into-a-web-font.html