vue移动端ui框架vant如何自定义引入阿里巴巴图标库

vue移动端ui框架vant如何自定义引入阿里巴巴图标库**最近公司要用vant做h5的一个项目，页面中有很多地方使用了图标，框架虽然本身有提供部分icon，但是很多时候都无法满足我们得需要，这个时候我们就需要自定义引入icon，这里我是使用的阿里巴巴图标库。**首先，我们先打开阿里巴巴图标库地址，下载我们项目里的图标资源。下载完的目录如下：在项目src/assets路径下新建...

liy1wen

3723人浏览 · 2019-12-16 12:44:06

liy1wen · 2019-12-16 12:44:06 发布

vant如何自定义引入阿里巴巴图标库

    框架虽然本身有提供部分icon，但是很多时候都无法满足我们得需要，这个时候我们就需要自定义引入icon，这里我是使用的阿里巴巴图标库。

首先，我们先打开阿里巴巴图标库地址，下载我们项目里的图标资源。
下载完的目录如下：
在项目src/assets路径下新建一个文件夹iconfont(文件名随意取),将下载好的文件放在iconfont目录下。
打开iconfont.css文件，修改文件内容。

同时在main.js里面引入iconfont.css文件和vant的组件
在需要使用图标的页面引入icon组件：

class=“iconfont” class-prefix='icon’这一段是固定写死的，后面的name值就是iconfont.css文件里图标对应的类名。
最后的页面显示
可以了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^