icomoon使用詳細介紹

此篇博文講述如何利用icomoon導入圖標，從而把自己想要的都通過icomoon方式進行，大家都知道，網站以及移動端，用圖標還是儘量選擇這種。因爲直接用image有些圖標會失真，從而也是前端開發之中，需求去掌握的一項，很簡單的就幾個步驟。

一，icomoon官網鏈接：https://icomoon.io/app/#/select
進入官網，默認會生成一套圖標文件，如果不需要可以將所有的文件進行刪除。具體操作如下圖所示。

• 爲橙色的是已選擇的圖標；
• 灰色的狀態是未選擇的；
• 右邊紫色的開關按鈕，可以開或關掉此列表；
• 左上角可以創建列表，自定義的相關文件，或者導入文件；
• impout icons按鈕爲導入自己想要的SVG格式圖。

會員用戶可以通過賬號存儲圖標的信息；
非會員用戶只能通過瀏覽器的在本地存儲相應的圖標信息，因此普通用戶儘量在同一個瀏覽器上面去編輯圖標庫，有需要的情況下將所有的svg圖標進行導出備份，這樣每次就不會失去以前導入好的圖標了。

二：導入圖標文件

選擇自己做好的SVG格式的圖標，會自動導入到下方列表中，如果沒有SVG格式的圖標，可以進入阿里圖庫下載：http://www.iconfont.cn/

三：選中修改按鈕，點擊任意圖標，彈出信息修改框。

四：導入創建新列表，以及退出，如下：

五：如果自己沒有製作好的圖標，也可以用官網提供的圖標，也是很不錯的，有些需要繳納費用，有些是免費的，其實也有挺多的。

六：圖標放置好了後，就點擊這個進行下載fons文件，會看到如下界面：

• 圖標的名稱可以自定義，自己取。
• 下面，如：e901，可以點擊查看在HTML中的調用以及方法。
• 點擊右下角的Download進行下載庫文件；

七：此時，下載文件完畢之後，會看到Zip的Icomoon文化，進行壓縮；

• 這是解壓後的相關文件，我們就需要css文件以後fonts文件，demo文件可以進行參考下，裏面是調用相關圖的方法。

• 把這整個icomoon文件導入到項目文件中
  
  八：此時，就可以進行在Html中調用圖標了。
  

• 如:我用這個span標籤， 把這個span文件寫入html上

• 千萬別忘記，把CSS樣式文件，導入到Html中（就是導入進來的fonts裏面的style.css文件），如：<link href="fonts/two/style.css" rel="stylesheet">

• 想用什麼圖，就直接在標籤裏調用名稱就可以了。

十：

1. demo-files,demo.html demo示例文件。
2. fonts 字體文件。
3. Read Me.txt 說明文件。
4. selection.json iconmoon項目文件，可用於導入。
5. style.css 項目中需要用到的樣式文件。

最終顯示如下所示：

以上就是講述如何利用icomoon進行方法調用圖標，現在這種方式，做前端開發人員務必要掌握此項技能，也對項目開發有很好的兼容與幫助，希望對各位看官有所幫助，謝謝您的閱讀，下期再見！~