踩坑 微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确

刚刚接触iconfont， 发现它真是个好东西。

使用字体图标的好处： 改颜色，改大小 都可以随时所欲，写个多态按钮分分钟搞定，爽的不要太过分！

阿里的字体图库 https://www.iconfont.cn， 功能很爽；之前接入fontawesome, 都是找到库整体引入，会导致最后的资源保变大。
现在可以新建一个项目，把需要的图标都弄进去，然后在线引用或者直接打包下载使用。

费话不多说，直入主题

mpvue引用iconfont

1.  注册账号，简历项目，上传图标
2. 根据图中的设置，找到  箭头1 对应的url，如果这里没看到，就点击 箭头2 指向的按钮，可以展示出来

3  下载此文件到本地，放置到mpvue项目的static目录下，保存为iconfont.css (可以自己改名字)

 

4. App.vue中import即可使用

import '../static/css/iconfont.css'

5. 页面中需要使用图标

  <view class="iconfont iconchenggong"/>

 

踩坑日记：

部分图标展示出来，不是原来设计的样子（在h5中展示是正常的）：

比如， 设置图标： 

<view class="summary-item iconfont iconshezhi"/>， 
 （设计图）（实现图）

css中查看对应的样式 如iconshezhi的具体实现如下：

.iconshezhi:before {
  content: "\e6e4";
}
所以其对应图标的unicode值是0xe6e4

将字体文件下载到本地，使用font forge查看具体字体内容。 参考资料传送门

可以看到对应的图标也是正确的，但是在界面上看到了这几个字

心理就怀疑会不会是小程序对于解析字体是用的分区方式不一样，于是开始排列展示最接近的图标

<view class="summary-item iconfont icontixing-moren"/>
<view class="summary-item iconfont iconshezhitixing"/>
<view class="iconfont iconchenggong"/>
<view class="summary-item iconfont iconduihao"/>
<view class="summary-item iconfont iconwenhao"/>
<view class="summary-item iconfont iconxiaoxi"/>
<view class="summary-item iconfont iconguanzhu-shixin"/>
<view class="summary-item iconfont iconguanzhu"/>
<view class="summary-item iconfont iconshezhi"/>

观察结果，发现对号之后的图标都无法展示，而字库中的图标排列如下：

根据实测结果可知，对号之后的图标都无法展示，进一步验证了我的猜想。

在做一个测试： 将后面的某个图标，修改unicode值后，再次使用，发现能正常展示了。

最后的实验结果： 微信小程序使用iconfont时， icon的unicode不能超过 0xe6dc（对号那个图标的unicode值）。

附 修改unicode的方法：

1. iconfont.cn 网页上直接选择编辑图标， 即可看到修改unicode地方

保存后，根据提示生成新的css文件链接，下载并覆盖之前的Iconfont.css文件即可。