vant 引入iconfont的正确姿势

先引入官网的自定义图标介绍

需要注意两个要点

1.引入字体（字体名称和前缀名称一致）

2.icon前缀是横杠连接

那么举例说明，如果想要如此这般使用：

<van-icon class-prefix="iconfont" name="weibo" size="2rem" />

1.前缀为iconfont

2.前缀使用横杠

具体如何操作，下面贴图：

1. 找到我的项目

2.新建项目

3.新建项目时候输入正确的FontClass前缀。这一步是重点，重点在于上下名称一致，前缀使用横杠"-"，font Family即为vant内class-prefix的值。

项目创建完毕后如下

此时可以去iconfont市场去添加自己需要的图标至“我的项目”了。

在点击购物车按钮后将图标加入到购物车内了。这应该会吧，允许我自作多情的演示一下。

接着选择添加至项目

选择刚刚创建的项目

回到图标管理-我的项目--Font Class，并点击生成代码

下面引入新生成的代码即可。

 

这里引入分两种，一种是引入本地文件另一种是引入阿里云的cdn。

点击下载后得到了一个iconfont.css。此时使用的是本地方式引入。

另外将上方链接打开后得到cdn地址。保存到本地后使用的是cdn方式。