原文：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. 接口上传base64编码图片

    package com.*.util; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io. ...

  2. docker Error response from daemon

    docker 在拉取镜像的时候报错 Using default tag: latest Error response from daemon: Get https://registry-1.docke ...

  3. iOS系统日历选择问题

    参考:https://blog.csdn.net/lg_sun/article/details/78913064 -(NSString *)getTimeToken{ NSDateFormatter ...

  4. 8 November in 614

    我开始看心灵鸡汤了-- 每当在书中读及那些卑微的努力,都觉得感动且受震撼.也许每个人在发出属于自己的光芒之前,都经历了无数的煎熬,漫长的黑夜,无尽的孤独,甚至不断的嘲讽和否定,但好在那些踮脚的少年,最 ...

  5. python中得字典和常用函数总结

    字典是python中一种常见得数据类型,用{}表示,并且以键值对得形式存放数据. dic={},其中得key键值是不可变得,类型可以是字符串.其中,列表,字典不可以作为键,键值是不可变得.字符串,元组 ...

  6. 高并发大流量专题---5、CDN加速

    高并发大流量专题---5.CDN加速 一.总结 一句话总结: CDN就是多整几台节点服务器,选距离用户最近的服务器来给用户服务,实现的话可以用阿里云.腾讯云他们提供的功能,简单方便,妈妈再也不用担心我 ...

  7. webpack 4.+版本需要注意的地方

    在webpack打包的时候需要npm下载webpack-cli,而且打包JS的命令从以前的webpack .\src\main.js  .\dist\boundle.js 要编程 webpack .\ ...

  8. PS操作

    笔:B 橡皮:E 新建:C+N 选取套索:L 套索后按Alt,移动 放大:Ctrl + “+” 或 Z 缩小:Ctrl + “-” 或 Alt Z / Alt ,然后用滑轮控制大小 撤销:Ctrl + ...

  9. apt-cyg for Cygwin（setup-x86_64 .exe ）在win10下的安装

    cygwin安装后,如果没有选择安装所有包(这会占用5G空间,很多包不需要),再需要安装新的包,可以启动setup-x86_64 .exe(我把它放置在C:\cygwin64目录下),添加包(如wge ...

  10. SQL分支语句与循环语句

    分支语句 if then elsif then else end if 举例: set serveroutput on declare num number; begin num:; then dbm ...