element 自定义 icon图标

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

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

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

在这里插入图片描述

三、点击箭头所指的位置

在这里插入图片描述

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

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

在这里插入图片描述

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

会自动给跳入此页面

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

选择下载到本地

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

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

至此大功告成

# elementui
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

轻松构建游戏登录能力，打造玩家流畅体验

avatar 华为开发者空间

一文为你解读MySQL8.0 Instant DDL源码实现

MySQL 8.0.12版本引入了INSTANT（即时）算法，对部分ADD COLUMN操作，不再修改用户原有数据，只需对表元信息进行修改。

avatar 华为开发者空间
cover

第三届OpenHarmony技术大会

avatar 华为开发者空间