微信小程序中使用iconfont图标

方案一：

利用小程序中不支持 ttf 字体，却支持 base64 的特点，我们可以通过将 ttf 字体转码成 base64 ，再通过 iconfont 的特点，通过设置字体大小和颜色来达到目的。

具体做法：
1.我们可以先去阿里提供的图标库 官网找到我们需要的3个图标， 点击 下载代码 将代码下载到本地~
2.解压我们刚才下载的包，会有以下这些文件，但对于我们来说，会用到的只有 iconfont.css 和 iconfont.ttf 这两个文件。
3.我们要对 iconfont.ttf 这个文件进行转码，将它转成 base64 格式，刚好 这个网站 就提供了这个功能，按照下图的步骤，分别上传 ttf 文件，选择配置，点击转换。

4.转换完成如下图所示，废话不多说，直接下载下来解压，我们需要的是里面 stylesheet.css 这个文件
5.我们在小程序里的静态资源文件夹里新建一个叫 iconfont.wxss 样式文件，将 上面解压出来的 stylesheet.css 里面的内容全部拷贝到 iconfont.wxss 中，另外，还记得我们上面说的 iconfont.css 吗？这时候就要派上用场了，我们打开 iconfont.css 这个样式文件，将下面的样式，也就是我用红框标注的内容复制到 iconfont.wxss 文件里，注意上面的不需要复制！！
到此为止，准备工作算是已经完成了，这时候你的 iconfont.wxss 应该类似下面这样:

6.接着，将我们的字体文件引入到 app.wxss 全局 , 这样你就可以在任何你想用到的地方进行调用了，只需要将 class 写对就没什么问题了

你要换颜色，只要改变对应的 color 就可以了~

方案一缺点：每次要添加或者更改一个图标，整个流程都要重新走一遍…

方案二

第二套方案的思路是借助 svg 矢量图具有不失真和可以自主填充颜色的特点，通过 fill 属性，用户可以自定义填充颜色，但是小程序里面不支持 svg 标签的，我们通过颜色选择器将用户选择好的颜色填充到 svg 里，在通过转码将换过颜色的 svg 转成 base64 编码（在线转换地址）发给小程序，小程序可以直接用在 image 标签中的 src 属性上~

缺点：更改颜色不灵活，每个svg图标都需要转换。

方案三

把SVG代码直接内联在CSS的url()方法中，语法就是data:image/svg+xml;utf8,加上完整的SVG代码即可！例如比较常用的background-image的url()方法，代码如下：

.icon-arrow-down {
    width: 20px; height: 20px;
    background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path fill="#00A5E0" d="M145.659,68.949c-5.101-5.208-13.372-5.208-18.473,0L99.479,97.233 L71.772,68.949c-5.1-5.208-13.371-5.208-18.473,0c-5.099,5.208-5.099,13.648,0,18.857l46.18,47.14l46.181-47.14 C150.759,82.598,150.759,74.157,145.659,68.949z"/></svg>') no-repeat center;
    background-size: 100%;
}

缺点：
更改颜色不灵活；
不支持IE，IE浏览器出于安全考虑，需要对一些字符进行安全转义。参考张鑫旭大神的文章

参考：
https://www.jianshu.com/p/9942ac4e94b5
https://www.zhangxinxu.com/wordpress/2018/08/css-svg-background-image-base64-encode/