首先参考之前写过的 加载使用 iconfont 阿里巴巴矢量图标库 和 自定义 iconfont 字体图标 这两篇关于 iconfont 的文章，主要使用 font-class 方式引用 iconfont 字体图标。具体引用步骤参考 自定义 iconfont 字体图标，之前使用 FontCreator 软件进行自定义 iconfont 编辑的，就是用 FontCreator 打开 ttf、otf 或者 woff 字体（只支持这三种字体），插入新的字形，编辑字形，插入素材图片，修改字形属性中的名称和代码点。

不得不说，上次能够成功真的是幸运，这次修改了很多次，在浏览器中显示正常，但到了移动端，iconfont 图标就变成了小框框或者干脆不显示。后续修改代码点和字形名称都不管用，真的想要放弃了，发现了一个在线字体编辑器：百度字体编辑器，使用它导出来的字体就没有再出现小框框的问题。不知道原因，就很莫名其妙。网上说什么字体加载顺序不对啊，或者这个那个的，但用这个在线编辑器导出的字体就引入一种 ttf 文件，照样没有出现问题。

所以，如果遇到 iconfont 在 PC 端浏览器模拟器中显示正常，但移动端不显示的，建议使用 百度字体编辑器，或者干脆使用小图标图片。iconfont 最大的优势就是可以将图片当成字体使用，调节颜色和大小，但这个优势在统一 UI 风格的时候并不明显，因为很长一段时间，UI 风格是不会变来变去的。