扩充合并阿里图标库

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

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

相关推荐

  • 互联网医院_三级等保_存储型跨脚本执行漏洞

    最近公司在做三级等保备案,安全测试方反馈过来一份漏洞测试报告,其中有一条定义为高危的漏洞:存储型跨脚本执行。 造成这个漏洞的原因,是因为没有对客户端提交的内容进行安全过滤。系统用的…

    2021年2月5日
    40.5K
  • docker的备份和迁移

    1.查看容器 2.容器保存为镜像 php是容器名称 myphp是新的镜像名称 此镜像的内容就是你当前容器的内容,接下来你可以用此镜像再次运行新的容器 然后查询镜像,看一下结果 3.…

    2020年11月17日
    1.4K
  • 使用 Laravel 开发 API 时的前置准备(转)

    一、前言 使用 Laravel 有一段时间了,虽然公司项目使用的都是 Thinkphp 框架,但我个人还是比较偏好 Laravel,今天来总结我平时进行开发前的一些准备工作,如果有…

    2022年7月15日
    3.3K
  • 搭建以太坊轻节点

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

    2020年11月30日
    5.0K
  • 常见的Web攻击手段(转)

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

    2021年10月10日
    1.2K
  • codeigniter发邮件sendmail报错

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

    2020年11月12日
    1.6K
  • CentOS修改yum源

    1. 修改yum源 最近在搭建以太坊节点时,要用到golang编译,但是服务器供应商那边给安装的contos系统默认的yum源没有golang,所以,这边给系统修改成阿里云的yum…

    2020年11月30日
    40.3K
  • 虚拟机centos安装kooder

    前天在群晖上安装了一个gitlab,在github上拉了一些项目,想着搜索项目中代码的内容,但是问题就出现了,搜索只能搜项目名和简介。难道要把所有项目拉下来搜索?于是在网上找解决方…

    2022年3月14日
    2.6K
  • 单点登录SSO设计与实现(转)

    前言: 是时候了解一下SSO相关的知识了,本篇主要是概念篇,发现网上两篇不错的文章,简单整合了一下,原文链接:https://www.cnblogs.com/Java3y/p/10…

    2021年7月29日
    2.3K
  • php实现助记词转TRX,ETH 私钥和钱包地址

    TRX助记词转地址网上都是Java,js或其他语言开发的示例,一个简单的功能需要依赖其他环境来实现表示不能忍,毕竟php是世界上最好的语言。【狗头】 一、知识准备 要实现助记词转T…

    2022年8月4日
    7.7K

发表回复

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