製作生成icon-font步驟

1. 準備好圖示的SVG檔案
2. 進入icomoon
3. 在網頁的右上角找到 IcoMoon App 的按鈕，點選進入
4. 進入之後，將之前準備的Icon的SVG檔案在左上角的 Import Icons 按鈕上傳
5. 上傳之後在頂部選單選項中點選 筆 樣子的按鈕，再點選上傳的圖示就能夠對其進行修改;
6. 在修改的介面會有兩個輸入框一個是 Tags (用來在當前頁面展示和搜尋的)，另一個是 Names (用來命名你的這個圖示的，也就是下載之後樣式表之中真正使用的)
7. 完成所有圖示的設定之後，頁面下方有三個按鈕，點選 Generate Font

8. 這裡就是展示剛才設定的圖示資訊，檢查對比之後如果沒有問題，就點選頁面下方的剛才點選的那個選單下方的 Download 側邊的一個齒輪按鈕進行最後的設定

   • Font Name 設定你喜歡的名稱，這個會作為IconFont字型的名字 zzwicon
   • Class Prefix 這個會成為字型類的字首 icon-
   • 多選框選擇 Support IE8 和 Generate preprocessor variables for: less
   • CSS Selector 單選框選擇 Use a class 並在輸入框中輸入一個類名 .zzwicon
   • 其餘設定按照自己喜歡的來設定，關閉設定彈窗，點選 Download 下載
9. 將下載檔案解壓，使用其中的 style.css 檔案，以及 fonts 資料夾

10. 在 style.css 檔案中需要修改一些東西

       /* 我們需將下面的url路徑改為引用的fonts資料夾的路徑，根據實際情況修改 */
       @font-face {
       font-family: `zzwicon`;
         src:  url(`fonts/zzwicon.eot?q06q0o`);
         src:  url(`fonts/zzwicon.eot?q06q0o#iefix`) format(`embedded-opentype`),
             url(`fonts/zzwicon.ttf?q06q0o`) format(`truetype`),
             url(`fonts/zzwicon.woff?q06q0o`) format(`woff`),
             url(`fonts/zzwicon.svg?q06q0o#nbulicon`) format(`svg`);
         ...
       }
       /* 下方這個類中的字型樣式需要加上以下程式碼中的font-family */
       .zzwicon {
         font-family: `zzwicon`,PingFangSC-Light,`helvetica neue`,`hiragino sans gb`,arial,`microsoft yahei ui`,`microsoft yahei`,simsun,sans-serif !important;
         ...
       }
       .icon-msg:before {
          content: "e900";
       }

11. 然後就可以拿來用啦

// 首先需要引入
<link href=`path/to/style.css` />
// 然後可以在你需要用的地方使用上剛才的那些類名
<i class="icon zzwicon icon-msg"></i>