前言

接着上一篇《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的图标的下载使用》的全部内容了

阿里巴巴IconFont的图标的下载使用相关推荐

在HTML种引用阿里巴巴iconfont字体图标
概述什么是阿里巴巴iconfont字体图标呢? iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制. 以前要引用各种图标需要使用的是图标图 ...
阿里巴巴iconfont字体图标使用方法
iconfont字体图标的使用方法--超简单! 这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; ...
微信小程序使用阿里巴巴iconfont字体图标
打开阿里巴巴iconfont官网(http://www.iconfont.cn/); 把用到的字体图标加到项目里面; 进入到项目里面,选择font class方式来使用,如果没有生成过代码的同学点生成 ...
IconFont字体图标的下载与使用
如何在Iconfont下载字体图标如何在IconFont-阿里巴巴矢量图标库下载字体图标-字体图标如何使用一.IconFont的下载 1.首先打开官方网址 2.登录相关账号 3.添加需要的图标入库 ...
iconfont小图标从下载到引入到vue项目中的详细教程
地址:iconfont-阿里巴巴矢量图标库 iconfont小图标下载: (1)查找图标在搜索框直接文字搜索或者看下面的小图标库,找想要的,每个小图标库都有一个名字,比如:"阿里云官网& ...
将阿里巴巴Iconfont字体图标引入到HTML(CSS)文件中
一.打开iconfont阿里巴巴矢量图标库官方网站.找到喜欢的图标添加入库,同时建立项目,将你所选择的图标放到项目里. 二.复制 "//at..."那一串地址,将其写入在你想引用某 ...
vue项目中使用阿里巴巴iconfont字体图标
1.把下载下的东西解压全放在vue的某个文件夹 2.在main.js引入 import './assets/iconfont/iconfont.css' 3.在需要用图标的标签比如span标签引入你想 ...
使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色. 通过阿里巴巴图标库制作字体图 ...
iconfont、svg图标字体下载并使用
iconfont.svg图标字体下载并使用文章目录 iconfont.svg图标字体下载并使用一.进入阿里巴巴官方字体库二.查找需要的图标并加入购物车三.新建项目四.使用svg图标库提示: ...

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

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

前言

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

阿里巴巴IconFont的图标的下载使用相关推荐

最新文章

热门文章