圖片格式的icon圖標有很多缺點，例如放大時會失真，圖片體積大，不支持變色等，這篇文章會手把手指導你如何將一個png、jpg等圖片格式的icon轉換成字體文件的圖標

用下面的png圖片做示例

（一）首先我們需要找到一個png圖片轉svg矢量圖的網站，百度上可以找到很多這種網站，我這里是用的autotracer：https://www.autotracer.org/zh.html

（二）在轉svg圖片時根據實際需要，注意勾選忽略白色背景這個設置，當你的圖標和我的實例一樣是純色的時候，建議勾上它，否則你后面生成的字體圖標會包含多個path。而如果你的圖標由多種顏色構成，則沒必要選他。

參考：https://www.cnblogs.com/momozjm/p/6383058.html

①當純色圖片沒有勾選忽略白色背景時，生成的字體樣式會有多個path：

②勾選忽略白色背景后，就不會帶有path了

（三）當我們拿到轉換的svg圖片后，就可以使用icnmoon工具生成我們的字體樣式文件了

①打開https://icomoon.io/app/網站，通過左上角的import icon按鈕導入剛剛我們生成的svg矢量圖

②使用select按鈕選中我們剛剛導入的svg圖標，然后點擊右下角的Generate Font按鈕，就可以自動生成我們所需的字體文件圖標了

（四）解壓下載后的文件夾，我們需要的是fonts文件夾和style.css, 將這個文件放入你的項目中,style.css文件中引入了字體文件，所以會有路徑，這個時候你在使用的時候要注意路徑問題

①使用style.css中的樣式時，注意修改font-face里的url路徑，這里的路徑原本指向的是icomoon.eot、icomoon.ttf、icomoon.svg，但是我遷移到我自己的工程目錄下時，路徑和文件名字都根據工程名字做出了改變。

②我們在使用時應用style.css里對應的樣式就完成了，可以根據font-size和color控制字體圖標的大小和顏色

<i style='font-size:20px;color:red' class="icon-account"></i>

總結

以上是生活随笔為你收集整理的前端不求人系列——自己制作一个Icon字体图标的全部內容，希望文章能夠幫你解決所遇到的問題。

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