将png图片转换为字体图标
字体图标不仅可以随意调整大小,而且可以避免在页面制作过程中引用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图片转换为字体图标的更多相关文章
- 使用icomoon把svg图片生成字体图标
今天看了使用icomoon来将svg转换成图标字体,本来是不会使用别人给的svg,也不清楚具体的好处是什么,查了svg以后,越来越懵,svg挺好的为什么要转成图标字体呢. 一.SVG介绍 SVG 是一 ...
- 字体图标-把SVG图标转换成所需要的字体图标
小科普: 想必小伙伴们多少都了解或使用过字体图标,总体来说优点多于缺点,优点如下图: 任意缩放,图标不会失真: 可以改变图标颜色: 可以设置图标阴影: 可以设置透明效果: 主流浏览器都支持: 可以快速 ...
- AngularCli项目中添加字体图标(Font)详解
本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...
- CSS之精灵图(雪碧图)与字体图标
本文内容: 精灵图 字体图标 首发日期:2018-05-01 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了 ...
- Webpack干货系列 | Webpack5 怎么处理字体图标、图片资源
程序员优雅哥(youyacoder)简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解在不需要引入额外的loader的条件下运用Webp ...
- svg图片转换为WEB字体图标
今天我学会了使用字体制作网站 icomoon.io 制作web文本图标.跟我一起学习吧! (1)字体制作网站 icomoon.io 点击 icomoon APP ---> imp ...
- !!字体图标(iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等)。 图片压缩
http://www.iconfont.cn/ 阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.c ...
- 如何使用IconFont字体图标代替网页图片?
一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...
- ccs3中icon转换为字体的方法
小图标转换为字体有几大优点 文件小,一般50k以内 避免了加载多个icons,减少了加载次数,有利于页面优化. 兼容性很好,可以随便放大缩小,都能正常显示. 维护起来也很简单,只用找到这个字体文件(比 ...
随机推荐
- Python 扩展技术总结(转)
一般来说,所有能被整合或导入到其他Python脚本中的代码,都可以称为扩展.你可以用纯Python来写扩展,也可以用C/C++之类的编译型语言来写扩展,甚至可以用java,C都可以来写 python扩 ...
- POJ 1228 (稳定凸包问题)
<题目链接> <转载于 >>> > 首先来了解什么是稳定的凸包.比如有4个点: 这四个点是某个凸包上的部分点,他们连起来后确实还是一个凸包.但是原始的凸包可 ...
- linux中top命令使用及查看tcp连接
Linux top命令 介绍:top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,Linux top命令用于实时显示 process 的动态,即可以通过用户按键来不断 ...
- Openvas安装
Openvas简介 Openvas是开源的,是Nessus项目分支,用于管理目标系统的漏洞,检测目标网络或主机的安全性.它的评估能力来源于数万个漏洞测试程序,openvas 早起版本还有一个客户端,现 ...
- LeetCode刷题笔记--Python--28. 实现strStr()
class Solution: def strStr(self, haystack, needle): """ :type haystack: str :type nee ...
- Java设计模式从精通到入门一 责任链模式
一直都想对设计模式有一个深刻的认识,这样对于阅读源码的时候就不会那么吃力了.于是有了想要记录下设计模式的笔记.打算从自己不怎么熟悉的设计模式开始写,里面穿插着一点自己的想法,希望自己写完后,会又一 ...
- php get_magic_quotes_gpc()函数使用
magic_quotes_gpc函数在php中的作用是判断解析用户提示的数据,如包括有:post.get.cookie过来的数据增加转义字符"\",以确保这些数据不会引起程序,特别 ...
- json字符串转换对象的方法1
为了方便读者了解json的使用,读者直接粘贴下面代码看效果即可: var json1 = {'name':'小李','age':'11','sex':'女'};console.log(json1.na ...
- [Java web]Spring+Struts2+Hibernate整合过程(2)
摘要 上篇文章介绍了一种整合方式,不妨就叫做有hibernate配置文件的方式,这里介绍一种不用hibernate.cfg.xml的一种配置方式,为了方便,就仍在上篇的demo中,继续修改了. 步骤 ...
- extern字符串常量,宏定义字符串常量,怎么选
在使用常量的时候,我看到主要有两种写法: #define RKLICURegexEnumerationOptionsErrorKey @"RKLICURegexEnumerationOpti ...