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 相关文章推荐
javascript 学习之旅 (3)
Feb 05 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
JSONP之我见
Mar 24 Javascript
js实现文本框选中的方法
May 26 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
深入php self与$this的详解
2013/06/08 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
js禁止表单重复提交
2017/08/29 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
python避免死锁方法实例分析
2015/06/04 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Django视图和URL配置详解
2018/01/31 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
python中turtle库的简单使用教程
2020/11/11 Python
python定义具名元组实例操作
2021/02/28 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
临床医学应届生求职信
2013/11/06 职场文书
赔偿协议书范本
2014/04/15 职场文书
出国留学计划书
2014/04/27 职场文书
走进毛泽东观后感
2015/06/04 职场文书
导游词之韩国济州岛
2019/10/28 职场文书