将PNG图片转为ICON字体图标

将PNG图片转为ICON字体图标

在做web开发和优化中,图片处理是重要一环。现在的网站扁平化的居多,很多以字体图标的方式来替代图片显示,既可实现美观布局,又可优化资源,减少连接数。本文谈谈如何将PNG图片转为ICON字体图标。

【步骤】

步骤1:准备PNG图片

准备好要转换为ICON图标的图片,图片要求如下:

  • 图片格式:PNG
  • 图片颜色:单色
  • 图片大小:最好等宽高

步骤2:将PNG图片转为SVG格式

使用软件或线上转换工具,把PNG格式的图片转换为SVG格式。有很多在线转换的网站可以实现将图片转为SVG,这个示例我用的是下面的网站:

https://convertio.co/zh/png-svg/

将PNG图片转为ICON字体图标

步骤3:将SVG格式图片转为字体图标

使用IconMoon把SVG格式图片转为字体图标

网址:https://icomoon.io/

将PNG图片转为ICON字体图标

进入网站后点击右上角的“IcoMoon App”,进入图标管理界面后,点击左上角的“Import Icons”,将刚刚转换的SVG格式图片导入。

将PNG图片转为ICON字体图标

导入完成后,选择要转换为字体图片的项目,然后点击界面下部第三个按钮(Generate Font)

将PNG图片转为ICON字体图标

将PNG图片转为ICON字体图标

在打开的页面中,可以为每个图片定义名称。名称定义完成后,点击界面下部第三个按钮(Font Download)。一切顺利的话,字体图标就已生成好了。

将PNG图片转为ICON字体图标

使用

在下载下来的字体图标压缩文件中,我们实际要用到的是fonts文件夹和style.css文件,这里包含了我们自定义的所有字体图标和引用。使用IconMoon生成的字体图标默认使用span标签来生成图标,给span标签加一个相应字体图标的名称类名即可引用图标。类名格式默认为“icon-”加上我们刚刚自定义的图标名称,如刚刚定义的一个主页图标名称为“myHome”,则完整类名为“icon-myHome”。

使用步骤:

1、将fonts文件夹和style.css样式放入项目中,并引入style.css样式

2、调用:完整调用格式:

<span class=”icon-myHome”></span>

3、可以给ICON字体定义颜色、大小、显示效果等各种样式

 


【示例】

将PNG图片转为ICON字体图标

将PNG图片转为ICON字体图标

将PNG图片转为ICON字体图标

将PNG图片转为ICON字体图标

 

(本文完)

那时那我

jinyunblogadmin

发表评论

电子邮件地址不会被公开。 必填项已用*标注