製做生成icon-font步驟

製做生成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>