Element UI 添加自定义图标

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

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

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

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

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

首先搜索你想要的图标:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

记得要选择 Font Class

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

相关推荐

  1. ElementUI定义主题

    2024-07-14 09:14:03       37 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-14 09:14:03       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-14 09:14:03       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-14 09:14:03       57 阅读
  4. Python语言-面向对象

    2024-07-14 09:14:03       68 阅读

热门阅读

  1. 大模型时代,还需要跨端framework吗?

    2024-07-14 09:14:03       27 阅读
  2. 搭建docker私有仓库

    2024-07-14 09:14:03       26 阅读
  3. uvm中使用clone时,为什么要使用$cast

    2024-07-14 09:14:03       22 阅读
  4. Linux命令怎么背?

    2024-07-14 09:14:03       20 阅读
  5. OpenCV npy和txt文件的区别与使用

    2024-07-14 09:14:03       27 阅读