欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 高考 > Element UI 添加自定义图标

Element UI 添加自定义图标

2025/9/16 0:03:28 来源:https://blog.csdn.net/rotion135/article/details/140353522  浏览:    关键词:Element UI 添加自定义图标

Element UI 自带的默认图标   随着项目的越来越大,图标总是不够用,接下来就给大家说明下如何添加自定义图标

首页给大家介绍一个图标网站:iconfont-阿里巴巴矢量图标库

网站上有很多设计好的图标,基本都有你想要的了,如果还没有,那就就自己设计然后上传上去。

记得要在网站上注册个账号噢!!!! 

注册账号后,可以管理自己的图标项目

首先搜索你想要的图标:

接着,将图标添加到购物车,是的没错,购物车。

可以选择多个先添加到购物,再一起来操作以下流程。

然后点开上边的购物车图标,就能看到自己选择好的图标,选择添加至项目

如果没有项目,则右上角新建项目

我添加了个项目,命名为Element

添加到项目后,会跳转到项目管理的界面

重点来了,要设置Element相关的属性信息:

点击项目设置,按下面图片中显示的设置

操作好之后,点击下载到本地:

你就会下载到一个download.zip的文件

解压之后,你就会得到以下文件

将这些文件拷贝到你的前端项目中:

然后在main.js 导入iconfont.css文件

对应的图标名称,就可以在项目管理中查看,点击复制代码就可以

记得要选择 Font Class

这样你就能在前端项目中尽情的使用你的图标了

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词