Vue中使用ElementUI使用第三方图标库iconfont的示例

 更新时间:2018年10月11日 11:03:05   作者:无双孟堂  
这篇文章主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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-cli3项目打包后自动化部署到服务器的方法

    vue-cli3项目打包后自动化部署到服务器的方法

    这篇文章主要介绍了vue-cli3项目打包后自动化部署到服务器的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • vue2-elementUI部分组件样式修改方法

    vue2-elementUI部分组件样式修改方法

    这篇文章主要介绍了vue2-elementUI部分组件样式修改,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • Vue+ElementUi实现点击表格中链接进行页面跳转与路由详解

    Vue+ElementUi实现点击表格中链接进行页面跳转与路由详解

    在vue中进行前端网页开发时,通常列表数据用el-table展示,下面这篇文章主要给大家介绍了关于Vue+ElementUi实现点击表格中链接进行页面跳转与路由的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 关于vue父组件调用子组件的方法

    关于vue父组件调用子组件的方法

    本文主要介绍了vue父组件调用子组件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 详解vue组件之间的通信

    详解vue组件之间的通信

    这篇文章主要介绍了vue组件之间的通信,帮助大家更好的理解和学习前端的相关知识,感兴趣的朋友可以了解下
    2020-08-08
  • 在vue中高德地图引入和轨迹的绘制的实现

    在vue中高德地图引入和轨迹的绘制的实现

    这篇文章主要介绍了在vue中高德地图引入和轨迹的绘制的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue watch响应数据实现方法解析

    Vue watch响应数据实现方法解析

    这篇文章主要介绍了Vue watch响应数据实现方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue3的hooks用法总结

    vue3的hooks用法总结

    vue3中的hooks其实是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,这篇文章主要介绍了一文掌握vue3中hooks的介绍及用法,需要的朋友可以参考下
    2023-04-04
  • 深入探讨Vue3实现多数据变化监听的方式

    深入探讨Vue3实现多数据变化监听的方式

    随着 Vue 3 的发布,框架带来了更多的新特性和增强,其中之一就是 watch 函数的升级,这一改进使得多个数据的变化侦听更加优雅和灵活,本文将深入探讨 Vue 3 中的 watch 函数,以及如何以更加优雅的方式实现对多个数据变化的监听
    2023-08-08
  • 关于vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')

    关于vue3+echart5 遇到的坑 Cannot read properties of undefine

    这篇文章主要介绍了vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type'),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04

最新评论