将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,减少了加载次数,有利于页面优化. 兼容性很好,可以随便放大缩小,都能正常显示. 维护起来也很简单,只用找到这个字体文件(比 ...
随机推荐
- Smali语法
看阿里巴巴的<深入探索Android热修复>,里面的代码看不懂,一查才知道是Smali语法,百度了语法,转载如下 转载自smali 语言语法 1.smali apk文件通过apktool反 ...
- POJ 2250 Compromise【LCS】+输出路径
题目链接:https://vjudge.net/problem/POJ-2250 题目大意:给出n组case,每组case由两部分组成,分别包含若干个单词,都以“#”当结束标志,要求输出最长子序列. ...
- 学机器学习,不会数据分析怎么行——数据可视化分析(matplotlib)
前言 前面两篇文章介绍了 python 中两大模块 pandas 和 numpy 的一些基本使用方法,然而,仅仅会处理数据还是不够的,我们需要学会怎么分析,毫无疑问,利用图表对数据进行分析是最容易的, ...
- [代码审计]某租车系统JAVA代码审计[前台sql注入]
0x00 前言 艰难徘徊这么久,终于迈出第一步,畏畏缩缩是阻碍大多数人前进的绊脚石,共勉. 系统是租车系统,这个系统是Adog师傅之前发在freebuf(http://www.freebuf.com/ ...
- Python中的pass的作用
1.pass语句什么也不做,一般作为占位符或者创建占位程序,pass语句不会执行任何操作2.保证格式完整 3.保证语义完整 以if语句为例,在c或c++/java中: ? if(true) ;//do ...
- php parse_url 解析URL并返回其组成部分
[导读] php parse_url 函数教程parse_url ( PHP 4中, PHP 5中) parse_url -解析URL并返回其组成部分 描述 混合parse_url (字符串$网址[摘 ...
- java中动态给sql追加?号
/* * 用来生成where子句 len数组的长度 */ private String toWhereSql(int len) { StringBuilder sb = new StringBuild ...
- 在java中构建json对象,返回给前端页面
// 给客户端返回一个json对象 StringBuilder sb = new StringBuilder("{"); sb.append("\"name\& ...
- 20172302 《Java软件结构与数据结构》第四周学习总结
2018年学习总结博客总目录:第一周 第二周 第三周 第四周 教材学习内容总结 第六章 列表 1.列表是对象的有序集合,在 List 界面中定义. List 接口表示集合框架中的列表.列表可以具有重复 ...
- 动态创建的 CEdit 被限制长度,增加 ES_AUTOHSCROLL 属性;被无法Tab激活焦点,增加 WS_TABSTOP 属性(转)
动态创建的 CEdit 被限制长度,增加 ES_AUTOHSCROLL 属性:被无法Tab激活焦点,增加 WS_TABSTOP 属性. CEdit m_editUrl; // ES_AUTOHSCRO ...