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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 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+javascript实现二级级联菜单的制作
2008/05/06 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
Seajs源码详解分析
2019/04/02 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
详解Python中expandtabs()方法的使用
2015/05/18 Python
python中reload(module)的用法示例详解
2017/09/15 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
python爬虫用mongodb的理由
2020/07/28 Python
python 进程池pool使用详解
2020/10/15 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
财会专业毕业生自荐信
2014/07/09 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang
Python办公自动化解决world文件批量转换
2021/09/15 Python