阿里巴巴IconFont的图标的下载使用

前言

接着上一篇《Vue实现图片验证码、邮箱验证码以及Cookie记住我功能》，这篇文章主要给大家介绍下阿里巴巴矢量图标在Vue项目中的使用。Element UI中的图标本来就少，再加上可以满足用户需求的图标更是少之又少了。因此为了能更好的开发我们的Web项目，我们便采用了阿里巴巴矢量图标。阿里巴巴矢量图标官网

阿里巴巴矢量图标使用步骤

1. 进入官网搜索你想要的矢量图标
2. 选择你想要的矢量图标,添加入库
3. 点击右上角的购物车图标，将你选好的矢量图标添加到项目
没有仓库的自己新建一个：
首页->资源管理->我的项目->新建项目
4. 进入资源管理->我的项目->Symbol->刷新图标库->下载至本地
5. 将下载的zip文件解压

6. 在vue-cli、element-ui项目中，src->assets目录下新建文件夹iconfont，用于存放下载所得的压缩包的文件
6. 在项目中的main.js文件，导入iconfont.css样式，例如：import iconfont from './assets/iconfont/iconfont.css’

7. 在页面中直接使用即可，例如：
<i class="iconfont iconViid-icon-test2"></i>

el-input输入框内的使用prefix-icon：

<el-input  v-model="code" prefix-icon="iconfont iconanquanjizhi" placeholder="验证码"
            style="width:37%;margin-top:5%;margin-left: 13%;float:left"></el-input>

以上就是《阿里巴巴IconFont的图标的下载使用》的全部内容了