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 mobile事件多次绑定示例代码
Sep 13 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
详解JavaScript执行模型
Nov 16 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
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
php中__toString()方法用法示例
2016/12/07 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
javaScript基础详解
2017/01/19 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
关于对大人不礼貌的检讨书
2014/09/29 职场文书
信访工作汇报材料
2014/10/27 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
学习计划是什么
2019/04/30 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL