微信小程序开发--如何使用字体图标

第一步：下载需要的字体图标

进入阿里图标官网http://iconfont.cn/搜索自己想要的图标
流程为：
选中需要的图标—>点击“添加入库”–>点击购物车进入购物车–>点击下载代码按钮。


点击下载代码，将得到名为download.zip的压缩包，解压将看到以下内容：

第二步：转换ttf文件

进入https://transfonter.org/平台，将解压出来的ttf字体文件转化成base64格式。
流程如下：
点击Add fonts --> 添加刚才下载的文件夹里的iconfont.ttf --> 选中Base64 encode、TTF两个选项 --> 点击Convert --> 点击下载Download

下载后得到一个压缩包，解压将看到以下内容：

第三步 微信小程序使用图标

1.把上一步的文件打开，打开stylesheet.css：
2.再打开第一步（第一步 下载自己喜欢的图标）中下载的文件即一开始还没转换用download.zip解压的文件，打开里面的iconfont.css
3.把iconfont.css里面圈红的部分（即fontface部分不需要复制）复制到stylesheet.css里面

最后使用：

修改stylesheet.css后缀为wxss,名字也可以改为自己需要的（注意！！），然后就改好的整个文件夹放进微信小程序的公共文件里面，然后把整个文件import到页面的样式表里



效果：