将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.cnblogs.com/yangguoe/p/10161815.html

时间: 2024-10-08 23:57:14

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

[Phonegap+Sencha Touch] 移动开发43 WebApp字体图标的制作

Sencha touch从2.2开始,里面用到的图标全部是字体图标(icon font),也就是字体文件里面的字符作为图标来用. 主要特性 字体是矢量的,使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小而不失真,适用于不同分辨率和尺寸的屏幕 自由的修改颜色 添加阴影效果 支持图片图标的其它属性,例如,透明度和旋转等等 可以添加text-stroke和background-clip:text等属性,只要浏览器支持 字体图标的用法 我们来看下sencha to

CSS之精灵图与字体图标

本文内容: 精灵图 字体图标 首发日期:2018-05-01 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓存机制是会略去本地已经有的资源,如果前一次获取到了这个资源,那么后面不会再访问了,直到缓存的资源失效了.[意思有点类似去游乐园,有些票能玩所有游戏,而有些票只能玩一个游戏,如果你拿着能玩所有游戏的票,那你就不用麻烦去一次次买票了]). 将

iconMoon:字体图标(iconfont)解决方案及使用教程

1.iconMoon 是什么? 字体图标(icon font)解决方案,iconMoon 可以把svg图片生成字体图标,开发者可以通过设置字体大小和字体颜色来改变图标的大小和颜色而不失真 2.官网地址:https://icomoon.io 3.点击右上角的[iconMoon App] 进入图标上传.选择和生成页面 4.图标上传.选择和生成页面 4.1 把准备好的svg文件,通过[import Icons]入口或直接将svg文件拖至该页面,上传成功后,如下图所示: 4.2 选中要生成字体文件的图标

svg图片转换为WEB字体图标

今天我学会了使用字体制作网站   icomoon.io 制作web文本图标.跟我一起学习吧! (1)字体制作网站   icomoon.io   点击 icomoon APP  --->  import icons 导入文件入口 (2)SVG下载网站   iconsvg.com 专门下载svg图标 具体案例: 将SVG图标转换为字体文件,并可以应用到网页中. 一.下载svg   二.将svg文件转换为字体文件 三.字体图标的使用  显示效果

如何使用iconfont字体图标代替网页图片?

一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不

ccs3中icon转换为字体的方法

小图标转换为字体有几大优点 文件小,一般50k以内 避免了加载多个icons,减少了加载次数,有利于页面优化. 兼容性很好,可以随便放大缩小,都能正常显示. 维护起来也很简单,只用找到这个字体文件(比如.ttf文件),修改里面的某个图标即可. 制作方法 首先,用ps或直接用矢量图软件制作单个icon,制作好后保存为ttf格式,如图: faq.ttf 然后,打开字体编辑器,比如FontCreator,新建字体myfonts. 需要添加一个字体,可以右击——>插入,然后“导入图像”,即做好的矢量图片

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

微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格式,图片我们可以在线转换,随便搜一下,有很多在线转换工具,但是使用字体图标的时候,怎么转换呢?下面我们记录一下使用图标字体的l两个方法.    方法一:将字体url转换为base64的格式后使用 第一步,下载需要的字体图: 打开阿里巴巴矢量图标库,选择自己需要的图标添加到购物车,然后点击购物车下载代

bootstrap字体图标

bootstrap字体图标 http://v3.bootcss.com/components/ <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-C

练习,字体图标和before,afer伪类的方式开发慕课网右下角工具条

这个效果点击慕课网的这个地址就可以查看. 1. 字体图标的方式 相比较背景图片的方式,使用字体图标,会明显增加html结构的复杂度: <div class="toolbar-container"> <a href="javascript:;" class="tbitem tbitem-weixin"> <div class="tbitem-wrapper"> <span class=&