官方注册注册

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. CVAE-GAN论文学习-1

    CVAE-GAN: Fine-Grained Image Generation through Asymmetric Training 摘要 我们提出了一个变分生成对抗网络,一个包含了与生成对抗网络结 ...

  2. 123457123456#2#----com.ppGame.XueYingYu76--前拼后广--儿童英语_pp

    com.ppGame.XueYingYu76--前拼后广--儿童英语_pp

  3. 静态站点生成器-md-mkdocs

    推荐指数:

  4. Node.js 服务端图片处理利器

    sharp 是 Node.js 平台上相当热门的一个图像处理库,其实际上是基于 C 语言编写 的 libvips 库封装而来,因此高性能也成了 sharp 的一大卖点.sharp 可以方便地实现常见的 ...

  5. ztree通过id获取节点对象

    var treeObj = $.fn.zTree.getZTreeObj("treeId"); var node = treeObj.getNodeByParam("id ...

  6. php is_writeable函数bug问题

    其中bug存在两个方面,1.在windowns中,当文件只有只读属性时,is_writeable()函数才返回false,当返回true时,该文件不一定是可写的.如果是目录,在目录中新建文件并通过打开 ...

  7. （模板）hdoj1251（字典树模板题）

    题目链接:https://vjudge.net/problem/HDU-1251 题意:给定一系列字符串之后,再给定一系列前缀,对每个前缀查询以该字符串为前缀的字符串个数. 思路: 今天开始学字典树, ...

  8. Cannot assign requested address的解决办法

    今天想试一下redis,写了个程序,对redis连续进行100000访问,却出现以了Cannot assign requested address的问题,我起先是以为是redis的问题(可能承受不了这 ...

  9. Lua 学习笔记 （1）

    最简单的 lua脚本 , do print ("line:", indx) end 也可以写成 , do print("line:", indx) end lu ...

  10. 剑指offer11：输入一个整数，输出该数二进制表示中1的个数。其中负数用补码表示。（进制转换，补码反码）

    1. 题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 2. 思路和方法 使用移位(<<)和 “| & !”操作来实现.1的二进制是:前面都是0,最后一位 ...