转载自：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. discuz修改禁止性别保密选项

    第一步找到source/function/function_profile.php 第二步  注释下面的代码 else { $html .= '<option value="0&quo ...

  2. JNI与NDK简析（一）

    1 JNI 简介 在Android Framework中,需要提供一种媒介或 桥梁,将Java层(上层)与C/C++层(下层)有机的联系起来,使得他们互相协调完成某些任务.而充当这种媒介的就是Java ...

  3. element-ui中cascader同时获取label和value值

    关于elementUI中cascader选中值后,能获取value或者label,但不能同时获value和label,这一问题,琢磨出了这么个办法.以新增和编辑城市为例,type: 1 编辑,type ...

  4. 《JavaScript和jQuery实战手册（原书第2版）》——2.1节语句

    2.1 语句JavaScript语句是基本的编程单元,通常表示JavaScript程序中的单个步骤.可以把一条语句看做一个句子一样,就好像成串的句子一起组成一个段落(或一章,或一本书)一样,把语句组合 ...

  5. DB2 Zos 浅谈 - DB2 LUW VS DB2 Zos

    DB2 Zos 浅谈 - DB2 LUW VS DB2 Zos 概述: 各位可能对DB2 LUW了解得比较多,但对DB2 Zos(大机操作系统)知之甚少,因为IBM的内部资料一向是比较封闭的,特别是我 ...

  6. bootstrap-内联文本元素-小号文本

    说明 使用 <small> 标签包裹,其内的文本将被设置为父容器字体大小的 85% 示例 <!DOCTYPE html> <html lang="zh-CN&q ...

  7. 熟透vue手机购物商城开发的重要性

    带手机验证码登陆, 带全套购物车系统 带数据库 前后端分离开发 带定位用户功能 数据库代码为本地制作好了 带支付宝支付系统 带django开发服务器接口教程 地址:   https://www.dua ...

  8. Windows+Ubuntu双系统 ，Ubuntu安装

    这篇只是简单记录自己在Win10下另安装Ubuntu系统. 不是教程,因为不会. 推荐一个教程:https://blog.csdn.net/weixin_37029453/article/detail ...

  9. 在html中使用vue组件

    最近在维护公司的项目,当我拿到项目时,发现他用了vue. 但是~~仅仅是引用vue.js文件,整体的架构还是html那种,没有用webpack! 当时觉得~哇~原来还可以这样! 然后了解了业务逻辑和代 ...

  10. 【Hadoop离线基础总结】Sqoop常用命令及参数

    目录 常用命令 常用公用参数 公用参数:数据库连接 公用参数:import 公用参数:export 公用参数:hive 常用命令&参数 从关系表导入--import 导出到关系表--expor ...