最近公司需要做个小程序项目参加创新大赛（祖传开头，最近公司xxx），那就抽空花了2个工时撸出了一个简单的小应用，写的过程中发现小程序和正常的前端项目还是有不少区别的。其中花费时间最多的是研究怎么在小程序中使用iconfont。

      这里我记录下摸索的过程：

      1.和正常的前端代码一样，在入口的html文件（我使用的是mpvue，如果使用小程序原生标签应该也是类似的入口文件吧）中加上font class、或symbol的cdn

     就是这下面的一串东西，使用官方给的方法，发现不能正确的去使用，总是找不到对应的icon。

      2.将需要的icon加入购物车，然后下载下来，解压，你会看到这些文件：

然后将这堆东西除了demo全都放到项目中，一引用，ok，确实是可以用了，但是在开发者工具打包上传时，报了一堆错误：以下文件没有被打包上传，什么woff、css、eot等。一查微信开发者文档（https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html#%E5%85%81%E8%AE%B8%E4%B8%8A%E4%BC%A0%E7%9A%84%E6%96%87%E4%BB%B6），发现其中的原因了：

好嘛，你们内部有一个白名单，总之查了很多东西，没有说明能否自己添加这个白名单。那我就用了第三种。创建一个scss(使用原生API的应该是WXSS)，将之前第2个行不通的方案里下载的那一堆东西中的iconfont.css中的@font-face删了，因为会引用你刚才下载下来的woff等文件，会报找不到文件的错，只留下这么一堆东西：

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-lizi:before {
  content: "\e697";
}

然后将iconfont网站上的Unicode的“点击复制代码”给复制下来，替代掉之前@font-face所在的地方，这样

就可以在项目中使用了，例如：

<i class="iconfont icon-lizi"></i>