element使用自定义icon图标的两种解决方式
写项目时，发现 element 里的图标没有我需要的图标，
两种情况：
① 简单的替换小图标，没有选中变色等要求
② 有选中变色等要求，稍微复杂的需求
第一种情况解决办法：
修改Element UI自带的小图标，替换成自己的
首先找到那个自带的图标class，然后代码如下
.el-icon-sunrise {
background: url('你的图片路径') center center no-repeat;
background-size: 24px;
}
.el-icon-sunrise:before {
content: "11";
visibility: hidden;
}第二种情况解决办法：
这就需要去阿里巴巴图标矢量库找到需要的图标了
阿里巴巴图标矢量库 : https://www.iconfont.cn/collections/index
如果没有登录，请先登录（我一般用微博登录），如果没有注册，按着 步骤注册就可以了，登录完成就可以走下边的步骤
第一步：选中你需要的图标，点击添加购物车，添加之后再点击上边的购物车，步骤如下图所示
第二步：在第一步点击上边的购物车之后，弹出下面的页面，点击添加至项目
第三步：在第二步点击 添加至项目 之后，如下图所示，如果有项目直接点击确定就可以，如果没项目 ，点击图上显示的地方
第四步：在第三步点击之后，如下图所示
第五步：在上边点击确定之后弹出如下界面
第六步：按下图操作
第七步：点击项目中设置之后弹出 如下界面
第八步：对内容稍作修改，如下图所示
1、将 FontClass/Symbol 前缀 修改 el-icon-
2、将 Font Family 是 element-icons
修改完如下图所示
第九步：点击保存，就会跳到下图所示的界面，点击下载至本地
第十步：下载完成后会是一个压缩包 解压至你要用此图标的项目文件夹
文件夹里面是这样，等会需要引入iconfont.css
下一步：需要在main.js中引入此文件夹中的iconfont.css，（路径写你文件夹所在的路径）
最后：需要在 iconfont 中选中Font class 然后复制这个图标名进行使用，如下图所示操作
在项目中需要的地方粘贴上就可以了
完成啦
总结
到此这篇关于element使用自定义icon图标的文章就介绍到这了,更多相关element自定义icon图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
echarts设置tootip轮播切换展示(vue3搭配vue-echarts粘贴即用)
这篇文章主要为大家介绍了echarts设置tootip轮播切换展示效果,vue3搭配vue-echarts粘贴即用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步2023-10-10
这篇文章主要给大家介绍了关于你不可不知的Vue.js列表渲染的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-10-10
vue+element-ui+sortable.js实现表格拖拽功能
这篇文章主要为大家详细介绍了vue+element-ui+sortable.js实现表格拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
在工作中遇到N次input无法输入的问题,所以下面这篇文章主要给大家介绍了关于vue el-input输入框输入不了的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
关于Element-ui中table默认选中toggleRowSelection问题
这篇文章主要介绍了关于Element-ui中table默认选中toggleRowSelection问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue实现禁止浏览器记住密码功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue如何自定义组件v-model问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
本篇文章主要介绍了Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
我们做类似于猫眼电影的小程序或者H5 的时候 我们会做到那种 左右滑动的电影列表,这种列表一般带有电影场次,我这个项目是基于Taro +vue3 +ts 来写的用的组件库也是京东的nut-ui以上的代码和组件也有的是我二次封装的组件,对vue3电影切换列表知识,感兴趣的朋友一起看看吧2024-01-01
最新评论