官方注册注册

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. openresty开发系列26--openresty中使用redis模块

    openresty开发系列26--openresty中使用redis模块 在一些高并发的场景中,我们常常会用到缓存技术,现在我们常用的分布式缓存redis是最知名的, 操作redis,我们需要引入re ...

  2. qt操作excel報錯解決

    如果電腦上沒有office,需要判斷,否则,会报错 onecore\com\combase\catalog\catalog.cxx()\combase.dll!00007FFF1DF823CB: (c ...

  3. Spring cloud微服务安全实战-6-7jwt改造总结

    限流的改造. 同样注意,不要声明成Spring的Bean 在上面声明Rateliiter 如果能获取到权限继续往下走,没权限就返回,to many request的错误信息. 加到过滤器链上 加载Sp ...

  4. mongodb多个条件查询in,日期查询,嵌套查询,统计集合总数等常用实例

    1. 多个条件查询in in db.inventory.find( { qty: { $in: [ 5, 15 ] } } ) 2. 日期查询 db.books.find({}) 查询时间大于6-,结 ...

  5. 【计算机视觉】图像配准(Image Registration)

    (Source:https://blog.sicara.com/image-registration-sift-deep-learning-3c794d794b7a)  图像配准方法概述 图像配准广泛 ...

  6. 模仿系统C键功能菜单

    1.可以拖拽C键 2.依赖zepto 3.点击弹出菜单 效果预览:

  7. 常见浏览器CSS hack方法总结

    ie6和ie7 #tip {*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} IE8和IE9 :root .test ...

  8. Fiddler抓取Android手机网络数据包

    也许你也有疑问,如果开发没有完备的接口文档,我如何知道他API的信息? 这时我们就得通过一些抓包工具抓取这些API信息. 常见抓包工具 HTTP抓包工具:Fiddler.Charles.Firebug ...

  9. jvm(5)---垃圾回收(回收算法和垃圾收集器)

    1.垃圾回收算法 1.1 标记-清除算法 算法分为“标记”和“清除”阶段:首先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象.它是最基础的收集算法,效率也很高,但是会带来两个明显的问题 ...

  10. 【C/C++开发】C中调用C++函数

    C中如何调用C++函数? 前阵子被问及一个在C中如何调用C++函数的问题,当时简单回答是将函数用extern "C"声明,当被问及如何将类内成员函数声明时,一时语塞,后来网上查了下 ...