如何使用iconfont生成后的图标文件逆向导入iconfont

608 阅读1分钟

前言

在工作中遇到一些项目中使用了iconfont的图标库。突然有一天我们需要增加一些图标,却发现项目里只有从iconfont导出的图标文件。所以我们要怎么维护新的图标呢?


如何使用iconfont生成后的图标文件逆向导入iconfont

一、准备好图标文件

  1. iconfont.css
  2. iconfont.eot
  3. iconfont.svg
  4. iconfont.ttf
  5. iconfont.woff
  6. iconfont.woff2

这里我们主要使用iconfont.svg

二、使用

1.访问icomoon 在这里插入图片描述 2.点击左上角“Import icons”,选择本地iconfont.svg文件 在这里插入图片描述 在这里插入图片描述

3.点击右侧“三”下拉,全选导入的字体 在这里插入图片描述

4.点击左下角“Generate SVG & More” 在这里插入图片描述 5.下载SVG 在这里插入图片描述

6、解压后使用SVG目录下的文件导入iconfont即可

三、导入iconfont

1.解压下载的zip文件 在这里插入图片描述 2.使用SVG目录中的文件导入iconfont

  • 新建iconfont项目 在这里插入图片描述
  • 点击“上传图标至项目” 在这里插入图片描述
  • 拖拽以下文件至上传区域

单次上传建议控制在50个图标以内

在这里插入图片描述

  • 提交图标 在这里插入图片描述

3.等审核通过就可以看到图标了 在这里插入图片描述

4.后续添加新增图标到该项目即可

5.最后下载使用 在这里插入图片描述 在这里插入图片描述

注:查看字体

原文