Vue中使用ElementUI使用第三方图标库iconfont的示例


Posted in Javascript onOctober 11, 2018

1.在/resources/imgs/img_not_found.png//www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中,然后点击更多项目中的编辑项目

Vue中使用ElementUI使用第三方图标库iconfont的示例

2.修改前缀为el-icon-xxx,xxx自定义,然后将项目下载自本地

Vue中使用ElementUI使用第三方图标库iconfont的示例Vue中使用ElementUI使用第三方图标库iconfont的示例

3.将这5个文件放入到项目文件中,将iconfont.css引入到Vue项目中,

然后修改iconfont.css的.iconfont处,将其修改为下图所示

Vue中使用ElementUI使用第三方图标库iconfont的示例

4.修改iconfont.css后,大致如下图所示

Vue中使用ElementUI使用第三方图标库iconfont的示例

5.最后就可以采用icon相同方式引入图标,如下图方式引用即可

Vue中使用ElementUI使用第三方图标库iconfont的示例

注意:如果修改前缀为el-icon引入,可能会导致与element-ui的icon冲突导致显示异常。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
js添加绑定事件的方法
May 15 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
canvas绘制七巧板
Feb 03 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
css配合JavaScript实现tab标签切换效果
Oct 11 #Javascript
vue最简单的前后端交互示例详解
Oct 11 #Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 #Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 #Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 #Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 #Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 #Javascript
You might like
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
php数组转成json格式的方法
2015/03/09 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
js实现二级导航功能
2017/03/03 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
python脚本实现验证码识别
2018/06/07 Python
Python subprocess库的使用详解
2018/10/26 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
使用python模拟高斯分布例子
2019/12/09 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
为什么group by 和order by会使查询变慢
2014/05/16 面试题
少儿节目主持串词
2014/04/02 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
初中作文评语
2014/12/25 职场文书
2015年行政部工作总结
2015/04/28 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
地道战观后感400字
2015/06/04 职场文书
Python中文纠错的简单实现
2021/07/07 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle