官方注册注册

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. Python3基础 函数 参数为list 使用+=会影响到外部的实参

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  2. mtcnn论文学习

    Joint Face Detection and Alignment using Multi-task Cascaded Convolutional Networks 使用多任务级联卷积网络连接人脸检 ...

  3. 001-guava概述

    一.概述 Guava工程包含了若干被Google的 Java项目广泛依赖 的核心库,例如:集合 [collections] .缓存 [caching] .原生类型支持 [primitives supp ...

  4. github上fork分支后再合入原master分支的改动

    几个月前看到一个电商项目,文档比较全,fork下来学习下.后来因为其他事情耽搁了,现在想重新看看,发现改动比较大,master分支跟我fork下来的分支不一样了.咋办?简单,把最新的master分支下 ...

  5. Spring cloud微服务安全实战-5-11实现基于token的SSO(1)

    基于服务器session的SSO的方案,用户的登陆状态都是存在服务器端的 基于浏览器cookie的token实现一个sso,在原来的基础上做进一步的改造.让他不依赖session.而是完全由cooki ...

  6. python读写csv文件的方法(还没试,先记录一下)

    该csv模块定义了以下功能: csv.reader(csvfile,dialect ='excel',** fmtparams ) 返回一个reader对象,它将迭代给定csvfile中的行. csv ...

  7. SpringCloud学习成长之十四 服务注册(consul)

    这篇文章主要介绍 spring cloud consul 组件,它是一个提供服务发现和配置的工具.consul具有分布式.高可用.高扩展性. 一.consul 简介 consul 具有以下性质: 服务 ...

  8. DELPHI XE MYSQL数据库操作类 MYSQLHELPER

    注: 无需odbc配置 {* * MySQL Helper v1.0 * 2015.6.19 * 说明: * 这是一个操作MySQL的类,该类必须和libmysql.dll,dbxmys.dll两个文 ...

  9. 玩转CONSUL(2)–分布式锁

    1. 前言 分布式锁的场景,大家应该都有遇到过.比如对可靠性有较高要求的系统中,我们需要做主备切换.这时我们可以利用分布式锁,来做选主动作,抢到锁作为主,执行对应的任务,剩余的实例作为备份 redis ...

  10. etcd学习之安装与命令

    ETCD学习 下载etcd #下载 wget https://github.com/etcd-io/etcd/releases/download/v3.3.18/etcd-v3.3.18-linux- ...