1、首先可以去iconfont.cn阿里巴巴矢量字體庫中下載你想要的圖標（選擇格式為SNG
格式）。

2、打開iconmoon這個網站（這個樣子的），然后點擊右上角那個Iconfont App
如下圖:

3、上面有一個紫色的 Import Icons 點擊上傳你下好的 SVG 圖標。

4、上傳好的 SVG 圖標會顯示在下方的 Untitled Set 中，然后選擇上方有個類似 筆 形狀的圖標，點擊進入編輯。解釋一下上面的選擇器。
。鼠標箭頭 表示 選擇圖標
。垃圾桶 表示 刪除圖標 ，一般選擇垃圾桶， 點一下圖標就可刪除
。十字箭頭 表示 變換位置

5、在編輯中，第一個 Tags 是表示你要查找這個圖標時可以輸入的名字，第二個框輸入的是待會引用代碼時會用到的 名字 。我創建了花，所以就命名為 flower ，然后關閉編輯器，千萬別點下載。

6、然后點擊右下方的 Generate Font F ，進入后是這個頁面，然后點擊紅圈中的齒輪，進行下一步編輯

7、進入編輯后，需要修改以下內容。

8、Font Name 表示一會兒引入字體需要引入的 樣式名稱
Class Prefix 表示引入樣式的前綴名，如不設置后綴的話，引入的樣式名稱為 icon-flower

9、選擇 Support IE 8 和 Generate preprocessor variables for： Less 和Use a class

然后后面這個框內填寫css需要引入的類名，我就寫了 .wyhicon 這個名稱
10、然后關閉編輯，點擊右下角download下載這個字體。

11、下載完畢后，壓解。修改style.css中的內容

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

也就是在原來的style.css樣式下的.wyhicon下加一條font-family:
'wyhicon',PingFangSC-Light,'helvetica neue','hiragino sans
gb',arial,'microsoft yahei ui','microsoft yahei',simsun,sans-serif
!important;

11、然后在你的html文檔中引用就可以了

<!-- 首先引用你的css樣式 -->
<link rel="stylesheet" href="./css/style.css" type="text/css">
<!-- 然后引入你的字體文件就ok了 -->
<i class=" wyhicon icon-flower"></i>

總結

以上是生活随笔為你收集整理的如何制作icon-font小图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。