原文：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. APPScan安全测试工具

    1.下载IBM Security AppScan Standard.rar免费版,下载地址:https://www.cr173.com/soft/820147.html,安装完成后,配置扫描配置提示无 ...

  2. JSOI2018冬令营游记&总结（迁移自洛谷博客）

    游记 一开始在冬令营还没开始的时候,十分期待,殊不知每天都有一场浩劫在等着我. Day0 10:50出发,看见lbn同学发了一条说说,也随便发了一个. 然后在车上一直在睡觉,现在感觉挺后悔的,其实可以 ...

  3. python写txt文件

    with open('data.txt','w') as f: #设置文件对象 w是重新写,原来的会被抹掉,a+是在原来的基础上写 str0=u"写文件\n" #写中文要在字符串签 ...

  4. IntelliJ IDEA 代码调式

    Mute Breakpoints: 保留所有断点,但是不执行(程序一次性执行). Condition: 条件触发 即当执行到i的值变为5的时候,在断点处暂停.

  5. 源码分析笔记Vector

    概述 继承抽象类AbStractList,实现接口List.RandomAccess.Cloneable以及序列化接口默认容量大小为10,扩容增量为0,扩容为原容量的2倍如设置的增量大于0,则扩容为( ...

  6. js中的$符

    js中的$代表什么意思呢? 首先js的作用是什么呢?是修饰网页动态内容的.那么修饰就需要定位主题,比如你把html比喻一个美女,让她唱一首歌.那么首先你要定位出是你想让哪个美女唱歌,通常我们用id来定 ...

  7. Linux二进制程序安装使用

    下载好的二进制,压缩包解压,或者直接是二进制. 放到想要的目录 在 /etc/environment 双引号前面添加程序路径 以:开头,\结尾可以换行 接下来修改sudo ,不然sudo会找不到 以下 ...

  8. Asynchronous C# server[转]

    It hasn't been thoroughly tested, but seems to work OK. This should scale pretty nicely as well. Ori ...

  9. Java学习之多线程（线程安全问题及线程同步）

    一.线程安全问题产生前提:1.多线程操作共享数据2.线程任务中有多条代码 class Ticket implements Runnable { //2.共享数据 private int num = 1 ...

  10. Asp.Net Core 第01局：项目创建和部署 转载https://www.jianshu.com/p/9c9750e23b3e

    总目录 一.前言 本文通过从项目创建到部署,简单介绍Asp.Net Core. 二.环境 1.Visual Studio 2017 2.Asp.Net Core 2.2 三.开局 第一手:创建项目   ...