小程序引入iconfont字体

第一步 下载自己喜欢的图标

我用的是阿里巴巴矢量图库，在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到页面的样式表里