扩充合并阿里图标库

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

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

相关推荐

  • vmware最小安装centos并配置固定本地固定ip

    最近公司互联网医院的接入工作差不多进入了尾声,接下来就是整理一些资料什么的,所以有些空闲时间,想着学一下swoole,然后就碰到了安装虚拟机的问题。之前也装过很多次,但是每次安装都…

    2021年8月16日
    2.0K
  • Centos7 升级内核版本(转)

    1、查看当前内核版本 [root@localhost ~]# uname -r 3.10.0-327.el7.x86_64 [root@localhost ~]# uname -a…

    2022年3月13日
    1.6K
  • 计算机网络协议总结(转载)

    一、OSI七层协议 1、物理层: 很久很久以前,那时候还没有现在的外星人超级电脑,或者华为的P30。比较调皮的小明想要把自己机器上写好的一些个人游戏心得(如何玩好王者农药)发给小红…

    2022年5月31日
    1.7K
  • 香港阿里云Windows服务器省钱方法

    最近把因为香港阿里云服务器要续费了,因为之前购买的时候服务器上还部署了其他的java系统,当时对Linux操作不熟,所以操作系统选的是Windows的系统,但是阿里云香港的服务器需…

    2020年11月11日
    1.8K
  • 记一次生产环境救火-20210716

    今天起了个早,早早来到公司,本来吃完早餐,泡好咖啡,在工位上气定神闲的刷刷昨天的财经信息,准备开启今天的工作。想起昨天微信群里有人反映系统,系统加载较慢,于是打开阿里云后台,准备看…

    2021年7月16日
    1.4K
  • 广东省互联网医院接入——远程确认

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

    技术开发 2021年8月18日
    1.5K
  • PHP代码审计一条龙思路(转)

    00×0 前言 最近也是边挖src边审计代码,总结下最近的php代码审计的一些思路,我一般按照顺序往下做,限于能力水平,可能会有不对或者欠缺的地方,希望各位师傅能够指导。 00×1…

    2022年5月31日
    1.6K
  • 阿里云SLB(负载均衡)访问远程端口

    最近公司在搞互联网医院三级等保的问题,然后广东卫生健康委办公室的接入通知里有一段话,说是用于互联网医院运行的服务器不少于2套(这里的单位是套),我们不知道这里的意思是指,服务器要有…

    2020年12月19日
    2.2K
  • centos7下宝塔安装DocHub记录

    最近看到一篇利用文库上传文档作副业的文章,然后把网盘里的各种文档试着上传了一下,结果上传了80多个文档,就成功了2个文档,这成功率,简直不能忍。 趁着周末在家两天,在网上搜了一天的…

    2021年7月26日
    3.1K
  • 常见的Web攻击手段(转)

    午饭期间,读者小李与我闲聊,谈到上周去面试的过程。经典的高开低走,面试初期答得还可以,但是到后面却不尽人意。其中有个面试问题引起了我的注意,面试官当时问小李:你知道有哪几种常见的&…

    2021年10月10日
    1.4K

发表回复

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