element 如何使用自定义icon图标

最新推荐文章于 2024-06-04 17:31:59 发布

可问春风Ovo

最新推荐文章于 2024-06-04 17:31:59 发布

阅读量1w

点赞数 10

文章标签： elementui vue

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/V17515040643/article/details/114831298

版权

element 自定义 icon图标

在使用element icon组件时，有时候会遇到几个组件库里没有的icon图标，是可以自定义来进行载入的。

一，我们可以在iconfont中搜索我们想自定义的icon图标

二，首先需要登陆iconfont 我一般用微博登陆登陆完成后搜索你想要的图标选中我们想要的图标，点击图片中类似于购物车的图标，添加入库

在这里插入图片描述

三、点击箭头所指的位置

在这里插入图片描述

会弹出这个窗口点击添加至项目

在这里插入图会天厨片描述

在这里插入图片描述

点击添加新项目会让你输入项目名称输入完后点击确认就好

会自动给跳入此页面

在这里插入图片描述

点击图中箭头所指的编辑项目

在这里插入图片描述

修改 elementUI 的前缀是 el-icon Font Family是 element-icons

在这里插入图片描述

修改完成后点击保存选择下载到本地

选择下载到本地

下载完成后会是一个压缩包解压至你要用此图标的项目文件夹

在这里插入图片描述

下一步需要在main.js中引入此文件夹中的iconfont.css

在这里插入图片描述

最后在需要在iconfont中选中Font class 然后复制这个图标名进行使用

在这里插入图片描述

在这里插入图片描述

至此大功告成

可问春风Ovo

关注

10
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
element 如何使用自定义icon图标

element 自定义 icon图标在使用element icon组件时，有时候会遇到几个组件库里没有的icon图标，是可以自定义来进行载入的。一，我们可以在iconfont中搜索我们想自定义的icon图标二，首先需要登陆iconfont 我一般用微博登陆登陆完成后搜索你想要的图标选中我们想要的图标，点击图片中类似于购物车的图标，添加入库三、点击箭头所指的位置会弹出这个窗口点击添加至项目点击添加新项目会让你输入项目名称输入完后点击确认就好会自动给跳入此页面点击图中
复制链接

扫一扫

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。