将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.iconfont.cn/中，在你所生成的项目中，直接将svg图片拖入，生成字体图标；

posted @ 2018-12-22 17:36  前端极客  阅读(12125)  评论(1)  编辑  收藏  举报