在vue中引入阿里的字体图标

在vue中引入阿里的字体图标1. 进入iconfont 的官网，下载需要的图标到本地2. 解压之后，将iconfont.css 和字体文件放到项目中3. 全局引入iconfont.css，在main.js中引入import './assets/iconfont/iconfont.css'4. 在组件中使用阿里的字体图标<i class="iconfont icon-mima

lancnn

5935人浏览 · 2018-09-28 09:22:21

lancnn · 2018-09-28 09:22:21 发布

在vue中引入阿里的字体图标

1. 进入iconfont 的官网，下载需要的图标到本地

在这里插入图片描述

2. 解压之后，将iconfont.css 和字体文件放到项目中

在这里插入图片描述

3. 全局引入iconfont.css，在main.js中引入

import './assets/iconfont/iconfont.css'

4. 在组件中使用阿里的字体图标

<i class="iconfont icon-mima"></i>
<i class="iconfont icon-zhidu"></i>
<i class="iconfont icon-riqi"></i>
<i class="iconfont icon-qingjia"></i>
<i class="iconfont icon-jiaoliu"></i>
<i class="iconfont icon-xinxi"></i>
<i class="iconfont icon-pingjia"></i>
<i class="iconfont icon-shenghuofuwu"></i>

5. 显示效果

在这里插入图片描述

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}$/, //不连续的两位字母// /^