前端不求人系列——本身製做一個Icon字體圖標

圖片格式的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/#/select網站，經過左上角的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>