原文：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. OpenFOAM4.0安装教程

    Ubuntu 14.04以上版本支持pack安装. 1. add repository sudo add-apt-repository "http://dl.openfoam.org/ubu ...

  2. Django学习——collectstatic错误

    Error fetching command 'collectstatic': You're using the staticfiles app without having set the STAT ...

  3. 如何设置Fiddler来拦截Java代码发送的HTTP请求，进行各种问题排查

    我们使用Java的RestTemplate或者Apache的HTTPClient编程的时候,经常遇到需要跟踪Java 代码发送的HTTP请求明细的情况.和javascript代码在浏览器里发送请求可以 ...

  4. 51nod 1714:B君的游戏（博弈 sg打表）

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1714 nim游戏的一个变形,需要打出sg函数的表 #incl ...

  5. cocos2D-X Doc

    { //https://docs.cocos2d-x.org/api-ref/index.html //https://docs.cocos.com/cocos2d-x/manual/zh/sprit ...

  6. Security基础(六)：部署Zabbix监控平台、配置及使用Zabbix监控系统、自定义Zabbix监控项目、实现Zabbix报警功能

    一.部署Zabbix监控平台 目标: 本案例要求部署一台Zabbix监控服务器,一台被监控主机,为进一步执行具体的监控任务做准备: 在监控服务器上安装LAMP环境    修改PHP配置文件,满足Zab ...

  7. Spring通知类型及使用ProxyFactoryBean创建AOP代理

    Spring 通知类型 通过前面的学习可以知道,通知(Advice)其实就是对目标切入点进行增强的内容,Spring AOP 为通知(Advice)提供了 org.aopalliance.aop.Ad ...

  8. 二次封装arcgis的timeslider

    arcgis的timeslider是对dojo slider二次封装,项目需要,所有Map用统一样式的slider,所以写了一个common的dojo class,统一调用生成slider,作为对ti ...

  9. 测开之路五十三：unittest运行参数

    Fixture:进行测试前的准备工作和测试后的清理操作.例如创建临时或是代理数据库,目录,服务进程等.用例(Case):最小的测试单元,检车特定输入的响应.TestCase作为所有用例的基类,测试ca ...

  10. OpenCV2.4.8 + CUDA7.5 + VS2013 配置

    配置过程主要参考:https://initialneil.wordpress.com/2014/09/25/opencv-2-4-9-cuda-6-5-visual-studio-2013/ 1.为什 ...