将png图片转换为字体图标

时间:2023-01-21 21:25:52

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

方法一:

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

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

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

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

具体步骤:

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

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

4.使用:

<span class="icon-about">

方法二:

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

将png图片转换为字体图标的更多相关文章

  1. 使用icomoon把svg图片生成字体图标

    今天看了使用icomoon来将svg转换成图标字体,本来是不会使用别人给的svg,也不清楚具体的好处是什么,查了svg以后,越来越懵,svg挺好的为什么要转成图标字体呢. 一.SVG介绍 SVG 是一 ...

  2. 字体图标-把SVG图标转换成所需要的字体图标

    小科普: 想必小伙伴们多少都了解或使用过字体图标,总体来说优点多于缺点,优点如下图: 任意缩放,图标不会失真: 可以改变图标颜色: 可以设置图标阴影: 可以设置透明效果: 主流浏览器都支持: 可以快速 ...

  3. AngularCli项目中添加字体图标(Font)详解

    本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...

  4. CSS之精灵图(雪碧图)与字体图标

    本文内容: 精灵图 字体图标 首发日期:2018-05-01 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了 ...

  5. svg图片转换为WEB字体图标

    今天我学会了使用字*作网站   icomoon.io 制作web文本图标.跟我一起学习吧! (1)字*作网站   icomoon.io   点击 icomoon APP  --->  imp ...

  6. &excl;&excl;字体图标(iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等)。 图片压缩

    http://www.iconfont.cn/  阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.c ...

  7. 如何使用IconFont字体图标代替网页图片?

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以*变换IconFont大小(不失真),可以修改IconFont颜 ...

  8. ccs3中icon转换为字体的方法

    小图标转换为字体有几大优点 文件小,一般50k以内 避免了加载多个icons,减少了加载次数,有利于页面优化. 兼容性很好,可以随便放大缩小,都能正常显示. 维护起来也很简单,只用找到这个字体文件(比 ...

  9. 如何在微信小程序中使用字体图标

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

随机推荐

  1. pt-online-schema-change原理解析

    都说pt-toolkit工具集中的pt-online-schema-change可以在线不锁表修改表结构,那么这个工具具体是什么原理呢,请见下面娓娓道来: 1.pt-online-schema-cha ...

  2. Google V8编程详解(四)Context

    http://blog.csdn.net/feiyinzilgd/article/details/8266780 上一章,比较略提了下V8的Context.本章将详细的讲解下Context的概念以及用 ...

  3. NGUI Scroll List

    NGUI Scroll List 1.Add GameObject with Script UI Panel(NGUI -> UI -> NGUI Panel) and Script UI ...

  4. BZOJ3532 &colon; &lbrack;Sdoi2014&rsqb;Lis

    f[i]表示以i为结尾的LIS长度 对于所有f[i]=1的,由S向i连边 对于所有f[i]=maxf的,由i向T连边 对于j<i,a[j]<a[i],且f[j]+1=f[i]的,j向i连边 ...

  5. Css3&lowbar;必备10个东西

    1.边框圆角(Border Radiuas) 这个是我们在平常很常用的吧,以前我在用div圆角的时候,特别特别的痛苦,不管是用CSS来画圆角,还是用图片来画圆角都不那么容易,但是现在好了,在CSS3中 ...

  6. Oracle用户密码过期问题解决

    一.用户密码即将过期,导致autotrace无法打开           如果用户密码即将过期,在登录数据库时会收到如下提示:           ERROR:            ORA-2800 ...

  7. mvc3&period;0 &plus;linq 操作数据库中表的数据(ps&colon;本人菜鸟刚学)

    1:添加控制器类文件HomeController.cs其代码如下: using System; using System.Collections.Generic; using System.Linq; ...

  8. 如何把匿名类型&period;GetType&lpar;&rpar;返回的对象传进泛型里面&lbrack;转&rsqb;

    //怎么取得匿名类型的Type放到 //泛型T当中?? var 匿名 = new { A = 0, B = 1 }; Type t = 匿名.GetType(); //然后下面 var xx = db ...

  9. 【css基础】垂直外边距的合并

    近期在重温<CSS权威指南>,还是想把基础再打坚固点,如今对垂直外边距的合并问题进行简单总结. 1. 两个块级元素的外边距都大于0时,取那个最大值作为两个块级元素的垂直边距 请看以下一个小 ...

  10. C&num;将Word&comma;Excel与Html&comma;PDF互转

    public class OfficeHelper { /// <summary> /// word转成html /// </summary> /// <param na ...