转载自：https://www.jianshu.com/p/59dd28f0b9c9

1.打开阿里icon，注册 >登录>图标管理>我的项目

 

2.新建项目

3. 添加icon到项目中

在图标库中找到想要的icon后，加入购物车，然后点击右上角的购物车，把icon添加到你的项目里吧~

设置fontClass,然后下载到本地

5.下载后进行解压。解压后修改其中iconfont.css文件

注意：el-icon-ali是你之前设置的icon前缀，第二个el-icon-ali前边有空格的

 

6.上边设置好以后，打开vue项目，在src-assets下创建了icon文件夹，将所有的文件复制了过来

在main.js里边把css引进来

然后重新npm run dev 一下

7.打开在阿里icon的项目，复制你想要的图标代码

使用两种引用方式，跟element自带的使用方法一样

<el-button icon="el-icon-alifresh"  size="small" circle @click="updateNum"></el-button>
<i class="el-icon-alifresh"></i>

Vue Element-UI使用第三方icon图标（转）的更多相关文章

  1. vue element-ui中引入第三方icon

    vue element-ui中引入第三方icon 把图标加入项目 设置项目名称,下载项目(项目名称自定义) 解压项目到开发目录 在main.js中全局引入css文件 修改下载下来的项目中的css文件, ...

  2. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  3. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  4. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  5. vue + element ui 表格自定义表头，提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  6. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  7. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  8. vue+element ui 的tab 动态增减，切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  9. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  10. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

随机推荐

  1. python爬虫——用selenium爬取京东商品信息

    1.先附上效果图(我偷懒只爬了4页)  2.京东的网址https://www.jd.com/ 3.我这里是不加载图片,加快爬取速度,也可以用Headless无弹窗模式 options = webdri ...

  2. python学习02python入门二

    学前须知:1.本文档有关内容均建立在python3.x版本上,python2.x已经成为历史,如有需要,文内会特别说明. 2.本文使用的编辑器多为架构在Windows上的pycharm,如需了解Lin ...

  3. spark下dataframe转为rdd格式

    dataframe可以实现很多操作,但是存储到本地的时候,只能存 parquest格式 需要存储源格式,需要转换为rdd类型 将dataframe中的每一行都map成有逗号相连的string,就变为了 ...

  4. js的call方法

    obj1.method.call(obj2,arg1,arg2,arg3...) call方法的作用就是 把obj1的方法放到obj2对象上使用 arg1,arg2....是参数,传给mehtod的哟 ...

  5. Vue学习—— Vuex学习笔记

    组件是Vue最强大的功能之一,而组件实例的作用域是相互独立的,意味着不同组件之间的数据是无法相互使用.组件间如何传递数据就显得至关重要,这篇文章主要是介绍Vuex.尽量以通俗易懂的实例讲述这其中的差别 ...

  6. EntityFramework 迁移遇到的问题

    2019独角兽企业重金招聘Python工程师标准>>> 添加迁移add-migration migrationname 更新数据Update-Database EntityFrame ...

  7. 通过例题进一步学习DP

    1.以上篇文章数塔为例 https://blog.csdn.net/weixin_43627118/article/details/88701586 上一章用的是递归的做法,这次我们采用递推的做法. ...

  8. uiautomatorviewer 出现安卓8.0级以上无法打开的解决方法

    一..本人在使用Android自带的uiautomatorviewer工具来进行app元素定位时,出现了Android 9.0打开不了.出现了如下图错误提示: 经过网上的查阅,总结了几个解决的方法. ...

  9. Python基础02 变量

    Python中的变量有两个特点: 1. 无需声明 a = 1 2. 不与类型绑定 a = 1 a = 'hello world' 变量名只是内存中具体对象的一个引用(reference). 对于 a ...

  10. 单元测试中使用Spring的ReflectionTestUtils更方便

    1 简介 ReflectionUtils是Spring中一个常用的类,属于spring-core包:ReflectionTestUtils则属于spring-test包.两者功能有重叠的地方,而Ref ...