（原文地址：https://blog.csdn.net/nongweiyilady/article/details/74244362）
第一步 下載自己喜歡的圖標(biāo)
我用的是阿里巴巴矢量圖庫(kù)羡疗，在Iconfont找到自己喜歡的圖標(biāo)叨恨，加入購(gòu)物車，如圖：
加入購(gòu)物車
添加至項(xiàng)目秉颗，如圖：
image.png
下載至本地蚕甥，如圖：
image.png
解壓,如圖：
image.png
第二步 轉(zhuǎn)換ttf
因?yàn)樾〕绦虻膚xss文件的font-face的url不接受http地址作為參數(shù),但可以接受base64,因此需將字體文件下載后,轉(zhuǎn)換為base64菇怀，然后引用。
- 進(jìn)入https://transfonter.org/平臺(tái)
-
點(diǎn)擊Add fonts爱沟，添加iconfont.ttf
image.png
image.png -
勾上如圖的選項(xiàng)
image.png -
點(diǎn)擊convert
image.png -
下載
image.png
第三步 微信小程序使用圖標(biāo)
-
我們把上一步的文件打開，如圖蜂大，再把里面的stylesheet.css就是我們所需要的蝶怔，我們打開stylesheet.css：
image.png
stylesheet.css
可以看到font-face的url已經(jīng)轉(zhuǎn)換為base64格式
-
我們?cè)俅蜷_第一步（第一步 下載自己喜歡的圖標(biāo)）中下載的文件即一開始還沒轉(zhuǎn)換用download.zip解壓的文件踢星，打開里面的iconfont.css
image.png
3.把iconfont.css里面圈紅的部分（即fontface部分我們不需要啦）復(fù)制到stylesheet.css
image.png - 好啦沐悦，現(xiàn)在就是怎么用的問題啦，我是把stylesheet.css改了個(gè)名字和后綴（注意改后綴噢Ｆ垦辍副签！上次忘記了沒有改成wxss還是用的css結(jié)果一直找不出bug啊摔杯子），把他放進(jìn)微信小程序的公共文件里面冠场，然后把整個(gè)文件import到頁(yè)面的樣式表里
image.png
然后就可以用啦碴裙，如圖点额！
image.png
image.png
（ok！遛人啦６桨省）
