方案一：
利用小程序中不支持 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 t="1540868110683" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="/2000/svg" p-id="1632" xmlns:xlink="/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M801.504818 539.525929c0.663667-1.327335 1.831083-2.49475 2.326834-3.822085a63.23232 63.23232 0 0 0-12.79359-73.635108L321.281418 17.707368a63.848011 63.848011 0 1 0-87.772025 92.753529l421.548797 398.776207-419.885631 404.597291a63.792039 63.792039 0 1 0 88.435693 91.953929l465.438808-448.64722c0.799599-0.799599 1.159419-2.158918 2.158918-2.990502a25.003473 25.003473 0 0 1 2.158918-1.831083 55.444222 55.444222 0 0 0 8.139922-12.79359z m0 0z" fill="#cdcdcd" p-id="1633"></path></svg>') no-repeat center;background-size: 100%;}
改颜色的话直接改 fill="#cdcdcd" 就可以。
缺点：
不支持IE，IE浏览器出于安全考虑，需要对一些字符进行安全转义。参考张鑫旭大神的文章
参考：
/p/9942ac4e94b5
/wordpress//08/css-svg-background-image-base64-encode/
