圖片格式的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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/5422.html
標籤：Html/Css
上一篇：CSS基礎-02