扩充合并阿里图标库

最近在开发系统时遇到一个问题,因为前端用的是网上的前端模板,该前端引入的是他自己在阿里巴巴图标库文件。但是当我想用其他图标时就出现问题了,这个图标库里没有我想用的图标,或者用的图标名和自己想要的不一样。难道再引入一个自己的图标库,强迫症表示忍不了。于是在网上搜了一下,合并图标字体的方法,这里记录一下,分享给其它遇到相同问题的人。

1.保存要扩充的图标文件

例如我这里的图标文件://at.alicdn.com/t/font_3379869_jumri0i71g.css

扩充合并阿里图标库

有些是eot、woff2、woff、ttf、svg等文件,有些只有其中一个文件,主要是看用户的设置,保存其中一个字体文件即可。

扩充合并阿里图标库
阿里巴巴图标库项目设置

2.用百度在线字体编辑器,编辑字体文件,生成svg文件( 图标文件中有svg文件可直接跳过这一步)

打开百度在线字体编辑器 https://kekee000.github.io/fonteditor/

扩充合并阿里图标库

打开字体文件( eot、woff2、woff、ttf ),如果是要合并或者添加自己的图标,可以打开多个字体文件。

扩充合并阿里图标库

合并编辑完图标后,保存项目,然后下载压缩包,压缩包中有各种相关文件。

扩充合并阿里图标库

如果项目直接引用本地图标文件,这里导出的图标文件,已经可以使用了。

3.将字体整个svg图标分成单个图标文件

因为阿里巴巴图标库上传图标时需要单个图标文件上传(我不知道是不是可以整个文件上传,测试上传整个svg文件,显示空白,不知道是不是方法不对),所以这一步的作用是将整个svg文件保存成单个图标svg文件。

打开svg文件编辑工具:https://icomoon.io/app/#/select

扩充合并阿里图标库

首次打开会有一些默认的图标,不用管他(也可以选择加入到你要导出的图标库里)。导入要编辑的svg文件。

扩充合并阿里图标库
导入svg文件

选择要导出的图标。

扩充合并阿里图标库

可以选择加上编辑器自己带的图标。

扩充合并阿里图标库

将选中的图标生成单个文件图标

扩充合并阿里图标库

如果需要修改图标名称,可以在这里修改。

扩充合并阿里图标库

下载生成的文件包

扩充合并阿里图标库
扩充合并阿里图标库
扩充合并阿里图标库
生成的单个图标svg文件

4.上传到阿里巴巴图标库

登录阿里巴巴图标库,进入后台,创建自己的项目,然后上传图标。

扩充合并阿里图标库
扩充合并阿里图标库
扩充合并阿里图标库
扩充合并阿里图标库

生成代码就可以使用了

扩充合并阿里图标库

5.参考信息

因为浏览器奔了,参考的资料连接找不到了,在这里感谢所有无私分享的创作者吧。

原创文章,作者:Zeyu,如若转载,请注明出处:https://jinzhijun.cn/develop/1066

赞 (1)
ZeyuZeyu
上一篇 2022年4月18日 下午4:12
下一篇 2022年5月29日 上午1:02

相关推荐

  • 获取宝塔搭建的Ecshop的源码和数据库的方法

    最近在虚拟机里搭了一个kali2022,想试试kali的一些工具的功能,于是想到最近在网上的源码站下载了一套ecshop二开的商城,就搭建在另一个虚拟机上,想着看自己能否攻破下来。…

    2022年5月29日
    2.5K
  • 搭建以太坊轻节点

    1. 安装 go 语言 安装 go 主要是为了去编译 go-ethereum 源码 查看go版本 2. 安装 git 安装 git 主要是为了拉取 go-ethereum 源码 查…

    2020年11月30日
    5.5K
  • linux 测试端口通不通(四种方法)(转)

    针对Linux系统:有1、2、3、4四种方法针对Windows系统:有2、5两种通用方法 一般情况下使用”telnet ip port”判断端口通不通,其实…

    2022年3月13日
    2.6K
  • 理解开发HD 钱包涉及的 BIP32、BIP44、BIP39(转)

    理解开发HD 钱包涉及的 BIP32、BIP44、BIP39 数字钱包概念 钱包用来存钱的,在区块链中,我们的数字资产都会对应到一个账户地址上, 只有拥有账户的钥匙(私钥)才可以对…

    2022年8月4日
    5.3K
  • 网站防DDOS攻击思路

    最近给一个客户搭的网站,受到DDOS攻击,因为源码是在网上找的,代码质量不忍直视,一个首页就有n条sql查询。虽然服务器配置用了8核8G内存,然后也加了阿里云全站加速(过滤了一些流…

    2022年9月5日
    3.3K
  • 红米8A刷机root流程记录

    自从安卓版本升级以后,app抓包https就成了问题,所以上周就在咸鱼上买了一个红米8a,计划着root手机来做开发测试使用。在绑了小米账号7天后,终于可以解除bl锁,然后把手机r…

    2023年3月5日
    7.1K
  • codeigniter发邮件sendmail报错

    最近将公司系统从Windows换成了Linux,大部分功能都能正常使用,唯独发送邮件通知功能时,出现了错误。通过var_dump($CI->email->print_d…

    2020年11月12日
    2.0K
  • 以太坊节点面面观:全节点与轻节点(转)

    收看本系列文章的读者,应该都对于区块链的基本原理和架构有些概念,如果没有,推荐您先去Google搜寻区块链、比特币、以太坊这些关键字了解一下。我们将在这些基础概念之上,来谈区块链的…

    2020年11月30日
    7.2K
  • 广东省互联网医院接入——远程确认

    今天公司互联网医院接入终于走到了远程确认这一步了,因为一直是摸着石头过河,中间做了不少弯路,这里做个记录,希望也在摸索的同行如果看到能有一个参考。当然写这个的时候,还只是远程演示了…

    技术开发 2021年8月18日
    1.7K
  • 广东互联网医院监管对接_前置机FTP文件上传

    最近在广东省互联网医院监管对接过程中,有些文件需要同步到前置机上,我这里用到的解决方案是通过ftp上传文件功能实现的,这里记录一下一些遇到的问题。 1.安装,配置ftp服务器软件 …

    2021年5月26日
    1.9K

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注