vant 引入iconfont的正确姿势

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

vant 引入iconfont的正确姿势_第1张图片

需要注意两个要点

1.引入字体(字体名称和前缀名称一致)

2.icon前缀是横杠连接

那么举例说明,如果想要如此这般使用:

1.前缀为iconfont

2.前缀使用横杠

具体如何操作,下面贴图:

1. 找到我的项目

vant 引入iconfont的正确姿势_第2张图片

2.新建项目

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

vant 引入iconfont的正确姿势_第3张图片

项目创建完毕后如下

vant 引入iconfont的正确姿势_第4张图片

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

vant 引入iconfont的正确姿势_第5张图片vant 引入iconfont的正确姿势_第6张图片

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

vant 引入iconfont的正确姿势_第7张图片

接着选择添加至项目

vant 引入iconfont的正确姿势_第8张图片

选择刚刚创建的项目

vant 引入iconfont的正确姿势_第9张图片

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

vant 引入iconfont的正确姿势_第10张图片

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

vant 引入iconfont的正确姿势_第11张图片

 

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

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

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

vant 引入iconfont的正确姿势_第12张图片

你可能感兴趣的:(vant,vue,iconfont)