将png图片转换为字体图标

字体图标不仅可以随意调整大小,而且可以避免在页面制作过程中引用N多的图片,发送请求造成的流量浪费,因此,我们可以将图标的icon转换成字体图标:

方法一:

1.将png格式的图片转换成svg格式;

网址:https://www.jinaconvert.com/cn/convert-to-svg.php

2.将svg格式的图标转成字体图标:

网址:https://icomoon.io/app/#/select

 具体步骤:

1 点击右上角 IconMoon App 进入WebApp
2 点击左上角 Import Icons 批量倒入之前已经转成 svg 的图标文件
3 点击选中所倒进来的图标,也可以点击右边的 menu 图标全选
4 点击右下角 Generate Fonts 生成图标
5 点击右下角已经变成 Download 的按钮,下载 iconfonts 压缩包

3.将下载的压缩包中的style.css和fonts这个文件夹copy到样式文件夹,在需要使用字体图标的页面中,根据路径引入style.css

4.使用:

<span class="icon-about">

 方法二:

在https://www.iconfont.cn/中,在你所生成的项目中,直接将svg图片拖入,生成字体图标;

posted @   前端极客  阅读(12198)  评论(1编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 字符编码:从基础到乱码解决
点击右上角即可分享
微信分享提示