小設計獅一隻，突然這天，老大說“把圖標給我做成一個字體可以嗎？”瓦特？？圖標字體？傳說中的icon-font?偶買噶，弄了半天，要麼 icomoon不能顯示我上傳的SVG，要麼就各種出問題，怎麼搞？研究一下午之後，得出了這個教程，比起網上看到的其他的繁雜的甚至看不懂的過程，這個 可以稱之為傻瓜式教程~來來來~走起~（大神退散~快避開~前方高能~）著急的同學可以直接看加粗的字體部分。但是看完整的，會超容易上手哦~
工具/原料
1.你需要一個矢量圖（AI做的最好）
方法/步驟
這裡，以已經有了一個位圖為例~灰色的，一個醜不拉幾驚世駭俗的……額……醜圖標。我們把它在AI裡摳圖來~填上一個紅色~然後把紅色的摳出來的新矢量圖給複製下來。
新建一個畫布，（好吧，畫布啊窗口啊文件啊什麼的，你愛怎麼稱呼都好，不要在意這些細節），這裡要注意的是，如果你每 個icon的大小不一樣，那你至少得保證你的SVG畫布一樣大才行，新建的畫布就和你切圖時用的統一尺寸一樣，一個標準就好，把你所有的icon都放進這 個尺寸裡，調節大小，它們變成字體就不會錯。這裡樓主需要46*46的，所以建了46*46的。
在新的畫布裡，粘貼出你剛才複製的新摳的矢量圖~由於樓主的畫布大小沒有大變化，所以和之前步驟一中的圖差不多，仔細看，可以看到，沒有原來的底圖了，只有我們同樣醜不拉幾的新摳的圖標。
下面，我們給我們的圖標填充成白色。為什麼要白色？因為程序員使用icon-font的ttf文件時，他們的默認顏色 一般是黑色和白色，具體的色值、大小、陰影特效等一切，由於製作完成後是ttf，和他們的代碼字體沒有區別，所以他們會自己根據需要來隨時靈活變動，而不 是跟你說“噢設計獅~給我一個紅的~綠色的也來一個~黃的也來一個~”他們可以自己來處理，不需要為了這種小事情打擾你。所以，你只需要把它弄成白色的就 好啦~怕變色以後看不到它了麼？點擊視圖中的輪廓，就可以看到它啦~注意，變成輪廓的時候，其實沒有黑色邊框的啦~只是為了讓你能夠看到它才顯示的喲~
保存成SVG格式。保存以後，桌面上生成了一個看起來像是瀏覽器文件的東西，什麼鬼？這是瀏覽器才能打開麼？打開怎麼 沒東西？因為你是白色啦~看不到是很正常的~背景也是白色的嘛~哈哈哈……這個可以通過屬性查看，它是SVG文檔的格式。名字真的可以起這麼隨意麼？當然 啦~在製作icon-font的頁面裡隨時可以編輯起名字之類的啦~所以，不要在意這些細節，讓我們飛快的進入下一步。
進入icomoon，來來來，先科普一下界面的使用啦，最主要的功能集中在下面的三個導航按鈕哦~自己製作的矢量圖，用中間的那個就好，左邊的按鈕裡可以從它的網站上選擇海量圖標，右邊的是生成按鈕，得上傳或者選擇以後才能使用。
在icomoon中上傳我們的圖標。點擊上傳圖標的按鈕，就會打開文件夾，選擇你存儲的位置，選中剛才導出的那個 SVG圖標文件就可以。放心，這並不是你上傳給他們做資源~只是在線製作而已~並不需要你捐獻自己的靈感~選擇完以後，你會在icomoon上看到你的 SVG圖標喲~是不是好神奇~別急呀~還有最後一兩步啦~
選中你這個SVG文件，並點擊右下角的生成按鈕，選擇以後，你的圖標會被有黃色描邊的白色圓角矩形籠罩，不怕，點右下角的生成按鈕。這時候跳轉到了新的頁面，我的上傳圖片中，綠色框中是你的圖片命名等信息，我隨便亂搞的。你會看到下載按鈕在剛才生成按鈕的位置，來，果斷按下載，完成我們的製作，大功告成。注意，這裡需要看你上方的幾個操作按鈕是否為選擇按鈕，如果是紅色的刪除按鈕，那意味著你現在的鼠標就是個刪除器，點一下就會從網頁上取消你的上傳操作，將會需要重新上傳。編輯按鈕就可以在這裡直接對你的圖標進行命名和CSS使用時的命名了。
下載好了，在桌面有一個icomoon的壓縮包，裡面包含了所有的相關文件，怎麼用？直接把這個壓縮包或者解壓後的文件夾發給你的程序員就好了，他會知道怎麼用的。他不知道怎麼用怎麼辦？打他呀！裝X不打草稿！不會用還敢叫我們做！！咳咳咳……來來來，秀一下我們的成果。這個字體文件，你自己也是應該可以用的，只是是圖形而已，可以自己根據愛好來研究~
