如何製做icon-font小圖標

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

二、打開iconmoon這個網站（這個樣子的），而後點擊右上角那個Iconfont App
以下圖:

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

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

五、在編輯中，第一個 Tags 是表示你要查找這個圖標時能夠輸入的名字，第二個框輸入的是待會引用代碼時會用到的 名字 。我建立了花，因此就命名爲 flower ，而後關閉編輯器，千萬別點下載。

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

七、進入編輯後，須要修改如下內容。

八、Font Name 表示一下子引入字體須要引入的 樣式名稱
Class Prefix 表示引入樣式的前綴名，如不設置後綴的話，引入的樣式名稱爲 icon-flower

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

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

十一、下載完畢後，壓解。修改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;

十一、而後在你的html文檔中引用就能夠了

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