字体图标不仅可以随意调整大小,而且可以避免在页面制作过程中引用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图片拖入,生成字体图标;