原文：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. Python3.5-20190503-廖老师-自我笔记

    列表和元组 list1 = [1,4,6,788,345,757]            tuple1 =      (345,234,567,878)         切记你的变量名不能和  hel ...

  2. 3.1.2 Socket网络通信开发

    Socket语法 Python中,我们用Socket()函数来创建套接字,语法如下: socket.socket([family[, type[, proto]]]) 参数 family:套接字家族可 ...

  3. 【leetcode】1017. Convert to Base -2

    题目如下: Given a number N, return a string consisting of "0"s and "1"s that represe ...

  4. modelviewset 中的序列化方法怎么用

  5. 写出高性能SQL语句的十三条法则

    1. 首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个10万条记录的表中查1条记 ...

  6. JS在页面加载之后运行

    通用的页面加载后再运行JS有两种方式:1.在DOM加载完毕后,页面全部内容(如图片等)完全加载完毕前运行JS.   2.在页面全部内容加载完成(包括引用文件,图片等)之后再加载JS 1.在DOM加载后 ...

  7. 【2019 Multi-University Training Contest 4】

    01:https://www.cnblogs.com/myx12345/p/11644076.html 02: 03:https://www.cnblogs.com/myx12345/p/116478 ...

  8. idea中git stash--解决pull冲突或切换分支问题

    场景1:pull代码时提示冲突,本地代码和远程代码有冲突 场景2:当切换分支时,当前分支的代码又不想commit 这两种场景可以使用git stash来解决,将当前未commit的代码暂存起来. 操作 ...

  9. jenkins clone代码时间太长怎么办？

    在Jenkins的默认配置中,clone代码时会拉取所有历史版本的代码,而且默认的超时时限只有10分钟.这就造成在某些项目中,由于代码量本身就比较大,历史版本也比较多,再加上网络环境不是特别好,Jen ...

  10. WEUI官方样式小程序工具打开预览

    https://github.com/Tencent/weui-wxss 用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目)