微信小程序使用圖標icon

（原文地址：https://blog.csdn.net/nongweiyilady/article/details/74244362）

第一步 下載自己喜歡的圖標

我用的是阿里巴巴矢量圖庫，在Iconfont找到自己喜歡的圖標，加入購物車，如圖：

 

加入購物車

添加至項目，如圖：

 

image.png

下載至本地，如圖：

 

image.png

解壓,如圖：

 

image.png

 

第二步 轉換ttf

因為小程序的wxss文件的font-face的url不接受http地址作為參數,但可以接受base64,因此需將字體文件下載后,轉換為base64，然后引用。

1. 進入https://transfonter.org/平台

2. 點擊Add fonts，添加iconfont.ttf

   
   
    

   

   image.png
   
   
    

   

   image.png

3. 勾上如圖的選項

   
   
    

   

   image.png

4. 點擊convert

   
   
    

   

   image.png

5. 下載

   
   
    

   

   image.png

第三步 微信小程序使用圖標

1. 我們把上一步的文件打開，如圖，再把里面的stylesheet.css就是我們所需要的，我們打開stylesheet.css：

   
   
    

   

   image.png
   
   
    

   

   stylesheet.css
   
   

   可以看到font-face的url已經轉換為base64格式

2. 我們再打開第一步（第一步 下載自己喜歡的圖標）中下載的文件即一開始還沒轉換用download.zip解壓的文件，打開里面的iconfont.css

   
   
    

   

   image.png
   
   

   3.把iconfont.css里面圈紅的部分（即fontface部分我們不需要啦）復制到stylesheet.css

   
   
    

   

   image.png
3. 好啦，現在就是怎么用的問題啦，我是把stylesheet.css改了個名字和后綴（注意改后綴噢！！上次忘記了沒有改成wxss還是用的css結果一直找不出bug啊摔杯子），把他放進微信小程序的公共文件里面，然后把整個文件import到頁面的樣式表里
   
    

   

   image.png
   
   然后就可以用啦，如圖！
   
    

   

   image.png
   
   
    

   

   image.png

作者：一包
鏈接：https://www.jianshu.com/p/0d631d3b1983
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。