微信小程序使用图标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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。