把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标

前言

iconfont阿里巴巴矢量图标库是我很喜欢的一个网站，可以下载/在线编辑/上传自己需要的矢量图标，也支持团队协作，那么在mpvue项目中如何引入呢？

将图标加入购物车

搜索关键词可以是中文也可以是英文

下载素材

点击网站右上角的购物车图标，此处我们选第三个

ps:添加到项目很有用，可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等，此处我们选择加入项目并下载代码

文件解压

一般网页中为了兼容性考虑，我们会留下css/ttf/svg/woff/eot文件，小程序中则有自己的规则，此处我们留下css和ttf文件，关于怎么处理请继续阅读

方法一、本地引入

由于小程序不支持处理ttf/woff/eot等文件，~~我们必须将子图文件转为base64格式再引入，~~直接使用源文件会提示几种字体文件没有上传，导致打包上传后字体无法显示。将引入eot/ttf/svg的几行删除，在base64那一行前加上src即可。

ttf转base64(iconfont下载的文件已有base64转码，此步跳过)

用stylesheet.css内容替换iconfont.css引入部分(上同

替换结果：</