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高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 Javascript
js 数据类型判断的方法
Dec 03 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 和 MySQL 时区的一点总结
2008/03/26 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
客户端静态页面玩分页
2006/06/26 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
TensorFlow实现卷积神经网络
2018/05/24 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
美德少年事迹材料
2014/01/23 职场文书
竞争上岗实施方案
2014/03/21 职场文书
关于环保的演讲稿
2014/05/10 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
python中print格式化输出的问题
2021/04/16 Python
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python