vue使用阿里矢量图标
官方注册注册
1、加入购物车
在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目;

2、下载
到我的项目中,将图标下载到本地

3.解压引入
在vue项目的assets文件夹下新建一个icon文件夹,将刚刚下载下来的代码包中的
- iconfont.css、
- iconfont.eto、
- iconfont.svg、
- iconfont.ttf、
- iconfont.woff
复制到iconfont文件夹下。
4.导入到全局
在main.js中全局引入iconfont.css。
import './assets/iconfont/iconfont.css'
5.使用
之后就可以在项目中正常使用了
<i class="element-icons el-iconzhank" > </i>
注意:
防止和element-UI 冲突,在第4步导入到全局的时候,要放在element后面

vue使用阿里矢量图标的更多相关文章
- angular中阿里矢量图标使用
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta ...
- 在vue项目引入阿里巴巴矢量图标
1.在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目: 2.到我的项目中,将图标下载到本地 3.在vue项目的assets文件夹下新建一个iconfont文件夹(名字自定义),将 ...
- vue项目中icon图标的完美引入
第一步: 进入阿里矢量图标库并登录 地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库 第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...
- 前端福利之盘飞那个 "阿里矢量图" (转)
一.准备工作 1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源, ...
- Vue中如何引入第三方icon库(阿里巴巴矢量图标库)
1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车 ...
- vue 引入阿里图标
1.去阿里图标矢量图标库将想要的图标添加入库 2.再去库中将图标添加到项目. 3.再到我的项目中,选择,我这里采用的是将图标代码包下载到本地再引入到vue项目中. 4.在vue项目的assets文件夹 ...
- 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具)
继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库 ...
- 将阿里矢量图添加到element-ui
在阿里矢量图的操作 选择需要的图标添加至购物车 选择图标 将购物车中的图标, 添加至项目 添加至项目 会自动跳转到我的项目 项目页面 在 更多操作 中选择 编辑项目 更多操作 将 Fo ...
- Iconfont矢量图标平台全面升级
阿里UX矢量图标库今天全新发布上线了,这次升级相对于老版本做了30多项功能和体验上的改善:赶快来体验一下吧!! 请猛戳:www.iconfont.cn 请猛戳:www.iconfont.cn 设计师p ...
随机推荐
- openresty开发系列13--lua基础语法2常用数据类型介绍
openresty开发系列13--lua基础语法2常用数据类型介绍 一)boolean(布尔)布尔类型,可选值 true/false: Lua 中 nil 和 false 为"假" ...
- shell编程系列12--文本处理三剑客之sed利用sed修改文件内容
shell编程系列12--文本处理三剑客之sed利用sed修改文件内容 修改命令对照表 编辑命令 1s/old/new/ 替换第1行内容old为new ,10s/old/new/ 替换第1行到10行的 ...
- python for 无限循环
class Infinit: def __iter__(self): return self def __next__(self): return None for i in Infinit(): p ...
- 算法习题---5.11邮件传输代理的交互(Uva814)
一:题目 当某人从user1@mta1发送给另一个人user1@mta2时,这两个MTA将会通信. 如果两个收件人属于同一个MTA,发送者的MTA只需与这个MTA通信一次就可以把邮件发送给这两个人. ...
- 一秒解决--------No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
在打war包时候遇到错误: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.6.0:compile (d ...
- DEBUG技巧1 SE37将参数保存为测试数据
1. SE37调试函数的时候,将参数保存为测试数据,供下次调试使用, 或者参考标准的赋值进行赋值 2. SE37 ->执行-> 测试序列 测试函数: CO_XT_COMPONENTS_DE ...
- [ kvm ] 学习笔记 9:WebVirtMgr 基础及安装使用
目录- 1. 前言- 2. webvirtmgr 简介- 3. webvirtmgr 部署实践 - 3.1 配置 webvirtmgr 主机 - 3.2 kvm node节点配置 - ...
- Dockerfile-server1
[root@lab2 docker-file]# cd server1/ [root@lab2 server1]# ls a.sh ddbes-server1-0.0.1-SNAPSHOT.jar D ...
- MySQL学习笔记——MySQL启动过程(一)
首先去官网或者github下载MySQL5.7的源码. 官网地址:https://dev.mysql.com/downloads/mysql/ github地址:https://github.com/ ...
- 14点睛Spring4.1-脚本编程
转发:https://www.iteye.com/blog/wiselyman-2212678 14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源 ...