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 学习笔记(十六) js事件
Feb 01 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 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
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
js图片预加载示例
2014/04/30 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
JS中的==运算: [''] == false —>true
2016/07/24 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
python删除文本中行数标签的方法
2018/05/31 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Python龙贝格法求积分实例
2020/02/29 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
致全体运动员广播稿
2014/02/01 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
vue的项目如何打包上线
2022/04/13 Vue.js