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 ...
随机推荐
- 蒙特卡洛树搜索算法 —— github上的implement的原代码
首先在网上看到了关于蒙特卡洛搜索算法的介绍,如下: https://www.cnblogs.com/steven-yang/p/5993205.html 并从中发现了一个在GitHub上impleme ...
- 网站无法连接上,但能上QQ的解决办法
一句话:修改DNS的IP地址 参考win10修改IP地址:https://jingyan.baidu.com/article/19192ad8eef0c9e53e570717.html 在网络上搜索合 ...
- IsNull、rs、sum
<% 'response.write (IsNull(rs("month_finish_count_price"))) If IsNull(rs("month_fi ...
- Docker容器(四)——常用命令
(1).基本使用方法 查看所有镜像.docker images [root@youxi1 ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE ...
- bladex之nacos配置
blade.yaml #服务器配置server: undertow: # 设置IO线程数, 它主要执行非阻塞的任务,它们会负责多个连接, 默认设置每个CPU核心一个线程 io-threa ...
- 【pip升级导致错误】 多个pip导致明明已经安装了包但是报no module错误
原来一直用apt install 默认安装的pip 8.01版本,今天因为一些原因,将pip升级到了19.01.升级后就导致了错误. 直接pip installl --upgrade pip,发现报权 ...
- LODOP打印table表格宽度固定-超宽隐藏
之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认的t ...
- SPSS数据分析基础考题
选择题 1. SPSS发行版本的说法,正确的是: B A. 两年发行一个新版本 B.一年发行一个新版本 C.没有任何规律 D.三年发行三个新版本 2.哪些是SPSS统计分析软件的基本窗口: A A.结 ...
- 【Chrome插件】右键搜--多站点搜索
写在前面:看文章前请先看文章写作时间,避免浪费时间.2019-09-10 使用场景 一次输入,同时在多个网站进行内容搜索,比如一键在不同网站搜索电影.一键获取多个搜索引擎的搜索结果. 操作演示 评分 ...
- Kubernetes(k8s)目录
Kubernetes(k8s)目录 Kubernetes集群安装(亲测有效)