Vue中使用ElementUI使用第三方图标库iconfont的示例
2018-10-12 16:44
2486 查看
1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中,然后点击更多项目中的编辑项目
2.修改前缀为el-icon-xxx,xxx自定义,然后将项目下载自本地
3.将这5个文件放入到项目文件中,将iconfont.css引入到Vue项目中,
然后修改iconfont.css的.iconfont处,将其修改为下图所示
4.修改iconfont.css后,大致如下图所示
5.最后就可以采用icon相同方式引入图标,如下图方式引用即可
注意:如果修改前缀为el-icon引入,可能会导致与element-ui的icon冲突导致显示异常。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue中使用ElementUI使用第三方图标库iconfont
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
- ionic如何使用第三方iconfont,以及图标微调 (转载)
- iOS开发中使用文字图标iconfont的应用示例
- vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标
- 如何使用IconFont字体图标代替网页图片?
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
- iconfont字体图标的使用
- 如何在HTML中使用图标字体 - icon font?
- 在iOS开发中使用iconfont图标
- PC端使用iconfont图标
- vue项目、代码提交至码云、iconfont的使用
- WPF使用矢量字体图标(阿里巴巴iconfont)
- iconfont字体图标的使用
- 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标
- web前端程序猿的福音----使用font-awesome代替icon小图标
- 【Android 进阶】Iconfont 图标的使用以及自定义
- Android iconfont字体图标的使用
- iconfont字体图标的使用
- 开发中,使用iconfont第三方字体,设置navigationItem