官方注册注册

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使用阿里矢量图标的更多相关文章

  1. angular中阿里矢量图标使用

    <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta ...

  2. 在vue项目引入阿里巴巴矢量图标

    1.在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目: 2.到我的项目中,将图标下载到本地 3.在vue项目的assets文件夹下新建一个iconfont文件夹(名字自定义),将 ...

  3. vue项目中icon图标的完美引入

    第一步: 进入阿里矢量图标库并登录 地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库 第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...

  4. 前端福利之盘飞那个 "阿里矢量图" (转)

    一.准备工作 1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源, ...

  5. Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

    1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车           ...

  6. vue 引入阿里图标

    1.去阿里图标矢量图标库将想要的图标添加入库 2.再去库中将图标添加到项目. 3.再到我的项目中,选择,我这里采用的是将图标代码包下载到本地再引入到vue项目中. 4.在vue项目的assets文件夹 ...

  7. 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具)

    继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库 ...

  8. 将阿里矢量图添加到element-ui

    在阿里矢量图的操作 选择需要的图标添加至购物车   选择图标 将购物车中的图标, 添加至项目   添加至项目 会自动跳转到我的项目   项目页面 在 更多操作 中选择 编辑项目   更多操作 将 Fo ...

  9. Iconfont矢量图标平台全面升级

    阿里UX矢量图标库今天全新发布上线了,这次升级相对于老版本做了30多项功能和体验上的改善:赶快来体验一下吧!! 请猛戳:www.iconfont.cn 请猛戳:www.iconfont.cn 设计师p ...

随机推荐

  1. asp中出现“错误 '80040e14' FROM 子句语法错误”原因

    当你的sql语句中出现 “错误 '80040e14' FROM 子句语法错误.”错误时,请注意了,那有可能是你的表名的命名不规范造成的,比如你的表名是“user”那么这杨的表名是不行的,那么在sql语 ...

  2. SVL-VI SLAM

    3.4. Mappoints management and key frame process如果在步骤3.3中成功跟踪地图点,则缓存地图点以在下一帧中优先化.当完成当前帧的跟踪时,应该为下一帧更新帧 ...

  3. linux中导入sql文件

    在linux中导入sql文件的方法分享(使用命令行转移mysql数据库) 因导出sql文件 在你原来的网站服务商处利用phpmyadmin导出数据库为sql文件,这个步骤大家都会,不赘述. 上传sql ...

  4. 报错:org.apache.sqoop.common.SqoopException Message: CLIENT_0001:Server has returned exception NoClassDefFoundError: org/codehaus/jackson/map/JsonMappingException

    报错背景: CDH集成sqoop2服务之后,创建好link和job之后,执行job的时候报错. 报错现象: sqoop:> start job -j Exception has occurred ...

  5. ABAP函数篇2 测试DATE_CONVERT_TO_FACTORYDATE

    DATE_CONVERT_TO_FACTORYDATE   根据日期返回工厂日历日期 函数功能说明: 标出工作日的计算方法 输入传输 CORRECT_OPTION = '+'如果指定的日期不是工作日, ...

  6. Flink FileSink 自定义输出路径——BucketingSink

    今天看到有小伙伴在问,就想着自己实现一下. 问题: Flink FileSink根据输入数据指定输出位置,比如讲对应日期的数据输出到对应目录 输入数据: 20190716 输出到路径 20190716 ...

  7. go micro rpc 直接调用 返回500 错误

    开启网关时需要 加上 flags micro api -handle=api --enable_rpc

  8. [ kvm ] 学习笔记 1:Linux 操作系统及虚拟化

    1. 前言 一台计算机是由一堆硬件设备组合而成,在硬件之上是操作系统,操作系统与计算机硬件密不可分,操作系统用来管理所有的硬件资源提供服务,各个硬件设备是通过 总线 进行连接起来的: 在操作系统之上, ...

  9. JS中的match和test正则表达式验证密码或用户名的一种规则

    match语法:字符串.match(正则表达式)有符合的:返回符合的数组无符合的:返回null test语法:正则表达式.test(字符串)有符合的:返回true无符合的 :返回false 该文的密码 ...

  10. 鼠标滚动事件onscroll在firefox/chrome/Ie中执行次数的问题处理

    需要写一个滚动条滑动加载图片的程序,研究了一下onscroll在不同浏览器里的执行次数,分别如下: var i=0; E.addHandler(window, 'scroll', function() ...