先引入官网的自定义图标介绍
需要注意两个要点
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方式。