原文：https://www.jianshu.com/p/38262f18eee2

1.打开iconfont阿里巴巴官网https://www.iconfont.cn

2.新建项目(这样方便后期维护图标库)

 
image.png

3.把需要的图标添加到购物车

 
image.png

4.打开购物车并选择添加至项目，然后确定

 
image.png

5.这时候可以在项目中看到你选中的svg图标，这时候可以点击下载至本地

 
image.png

6.打开下载的zip包就可以看到里面的文件，将下面几个文件取出

 
image.png

7.在vue的assets文件夹下创建icon文件夹，将取出的文件放入这个文件夹下

8.在main.js中引入import './assets/icon/iconfont.css'，这样子就可以在vue项目中使用你下载的svg图标

9.在vue中可以写<span class="icon iconfont icon-right"></span>就可以正常显示iconfont图标，修改的时候只需要修改icon-right这个class就可以了，这个class名称可以在font class中看到

 
如果后期想再添加图片在iconfont.css拷贝过来添加到项目上

每次新增图标后都要覆盖一次资源文件

vue 项目中使用阿里巴巴矢量图标库iconfont的更多相关文章

  1. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  2. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

  3. vue 项目中添加阿里巴巴矢量图

    1. 选择需要的图标,添加到购物车 2. 打开购物车,添加至我的项目 3. 打开项目列表 - 更多操作 - 编辑项目 修改FontClass/Symbol前缀,自定义一个名称,例如:v-icon-cu ...

  4. Vue中如何引入第三方icon库（阿里巴巴矢量图标库）

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

  5. 阿里巴巴矢量图标库（iconfont）批量全选的方法

    阿里巴巴矢量图标库: https://www.iconfont.cn/ 浏览器打开调试面板,进入 console 调试面板(Google浏览器快捷键F12)或者在页面空白处,点击右键->审查元素 ...

  6. 阿里巴巴矢量图标库（Iconfont）-利于UI和前端的搭配

    前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于 ...

  7. vue项目使用阿里巴巴矢量图标库教程

    前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...

  8. 超棒的阿里巴巴矢量图标库——支持IE6

    Iconfont.cn 是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台.网站涵盖了1000多个常用图标并还在持续更新 中,Iconfont平台为用户提供在线图 ...

  9. 如何在vue项目中引入阿里巴巴的iconfont图库

    1. 打开 http://www.iconfont.cn/ 2. 选择我们喜欢的图标,点击上面的小车,加入图标库,即右侧的购物车 3.点击购物车,点击下载代码 4.解压下载的文件夹,将文件夹复制到 a ...

随机推荐

  1. Flutter-ListView

    return Container( child: ListView( children: <Widget>[ Column( children: <Widget>[ Conta ...

  2. MySQL不支持的特性

    MySQL 1.不支持物化视图. 2.不支持位图索引. 3.不支持并行查询. 4.不支持哈希关联,MySQL的所有关联都是嵌套循环关联.不过,可以通过建立一个哈希索引来曲线实现. 5.不允许对同一表同 ...

  3. 调试web worker （动态生成的worker）

    1.在worker.js源码文件中 写下debugger关键词 2. F12打开控制台,重新刷新页面,加载worker.js文件(注意之前的缓存,chrome推荐使用 ctrl + F5 刷新) 3. ...

  4. boost heap

    1. using boost::heap::priority_queue #include <boost/heap/priority_queue.hpp> #include <ios ...

  5. Hive数据如何同步到MaxCompute之实践讲解

    摘要:本次分享主要介绍 Hive数据如何迁移到MaxCompute.MMA(MaxCompute Migration Assist)是一款MaxCompute数据迁移工具,本文将为大家介绍MMA工具的 ...

  6. 【Java】SpringBoot 佛祖保佑banner.txt

    最新写代码有点多,拜拜佛祖,代码不出bug. 在springboot项目的resources文件夹下面创建一个banner.txt文件,springboot启动的时候默认会加载这个文件 ${AnsiC ...

  7. [CSP-S模拟测试]:biology（DP）

    题目传送门(内部题23) 输入格式 第一行有$2$个整数$n,m$.接下来有$n$行,每行$m$个整数,表示$a$数组.接下来有$n$行,每行$m$个整数,表示$b$数组. 输出格式 一行一个整数表示 ...

  8. 绕X 轴 Y轴 Z轴旋转的结果

    void warp_perspect_3_angle(cv::Mat face, float roll, float yaw, float pitch) { cv::Mat face_img = fa ...

  9. 基于Java Agent的premain方式实现方法耗时监控（转），为了找到结论执行：premain在jvm启动的时候执行，所有方法前，会执行MyAgent的premain方法

    Java Agent是依附于java应用程序并能对其字节码做相关更改的一项技术,它也是一个Jar包,但并不能独立运行,有点像寄生虫的感觉.当今的许多开源工具尤其是监控和诊断工具,很多都是基于Java ...

  10. ucenter 整合同步登录的内部实现原理

    1.用户登录discuz,通过logging.php文件中的函数uc_user_login对post过来的数据进行验证,也就是对username和password进行验证. 2.如果验证成功,将调用位 ...