字体图标不仅可以随意调整大小,而且可以避免在页面制作过程中引用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. Webpack干货系列 | Webpack5 怎么处理字体图标、图片资源

    程序员优雅哥(youyacoder)简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解在不需要引入额外的loader的条件下运用Webp ...

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

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

  7. !!字体图标(iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等)。 图片压缩

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

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

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

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

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

随机推荐

  1. Loader监听数据源的变化

    步骤: 1.新建一个继承SQLiteOpenHelper的帮助类 2.在MainActivity中定义LoaderManager和SimpleCursorAdapter 3.按顺序重写如下方法:ini ...

  2. 我的Java自学之路

    其实在转正之后我就想抽个时间好好的梳理一下我的 Java 上车之路 ,但是一直拖到现在 ,因为有学弟问到 ,所以也就给了我动力 .毕竟答应了人家的事要做到 . 首先要有相应的背景介绍 ,不然说个毛线啊 ...

  3. 【Ray Tracing The Next Week 超详解】 光线追踪2-5

    Chapter 5:Image Texture Mapping 先看效果: 我们之前的纹理是利用的是撞击点p处的位置信息,比如大理石纹理 而我们今天的图片映射纹理采用2D(u,v)纹理坐标来进行. 在 ...

  4. Apache目录结构解释

    源地址:http://blog.51cto.com/marsman/1913676 本文主要讲述apache主要目录结构及主要配置文件 1.apache目录结构 [root@test apache]# ...

  5. 利用django信号实现计数功能

    本文主要知识点: 1.使用Django的signals来获取Model的新建/删除操作更新 2.使用数据库的select for update来正确处理并发的数据库操作 3.使用redis的sorte ...

  6. Bootstrap 警告、进度条、列表组、面板

    摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...

  7. Vijos.lxhgww的奇思妙想(k级祖先 长链剖分)

    题目链接 https://blog.bill.moe/long-chain-subdivision-notes/ http://www.cnblogs.com/zzqsblog/p/6700133.h ...

  8. C++ 模板应用举例_模板实现STL类(堆栈)

    //stack集合类是一个简单的堆栈的实现. //这里有两个模板参数,T和size,指定堆栈中的元素类型和堆栈中项数的最大值. //push 和 pop成员函数添加和删除堆栈中的项,并在堆栈底部增加. ...

  9. C#高级编程9 第18章 部署

    C#高级编程9 第18章 部署 使用 XCopy 进行部署 本主题演示如何通过将应用程序文件从一台计算机复制到另一台计算机来部署应用程序. 1.将项目中生成的程序集复制到目标计算机,生成的程序集位于项 ...

  10. [TenserFlow学习笔记]——安装

    最近人工智能.深度学习.机器学习等词汇很是热闹,所以想进一步学习一下.不一定吃这口饭,但多了解一下没有坏处.接下来将学习到的一些知识点做一下记录. 1.安装环境 在VMWare虚拟机中安装最新版本的U ...