小科普:
想必小伙伴们多少都了解或使用过字体图标,总体来说优点多于缺点,优点如下图:
- 任意缩放,图标不会失真;
- 可以改变图标颜色;
- 可以设置图标阴影;
- 可以设置透明效果;
- 主流浏览器都支持;
- 可以快速转化形态(做出一些变化,如 :hover等);
- 体积更小,并且不会有http请求,从而一定程度上利于前端优化
我个人一般使用 阿里巴巴矢量图标库
推荐一篇介绍为什么使用字体图标和怎样使用字体图标的文章:http://www.w3cplus.com/css3/icon-fonts.html
正题:
想必小伙伴们多少了解过SVG。SVG最大的特点——可以任意伸缩的矢量图形(图片可任意伸缩,且不会失真)
SVG基础教程:http://www.runoob.com/svg/svg-tutorial.html
在实际项目中,怎样才能使用SVG格式的图片呢?
因为SVG不能像一般的位图可以直接用img标签引入,这个时候就需要把SVG转换为字体图标
推荐一个网站:http://icomoon.io/ (因为是国外的网站,所以比较慢,请耐心等待)
下面介绍该网站怎样使用,把SVG转化成字体图标
①:打开官网后,点击下图红色箭头的地方
②:如下图
1:箭头指的地方IcoMoon Free就是该网站免费提供的字体图标
2:箭头右边的红色框是可以选择字体图标的大小
3:底部红色框,从左到右,意思分别是 生成SVG,你选择的字体图标个数,生成字体图标
4:如果你不想使用该网站提供的字体图标,就点击下图红色圆圈的 import icons 选项
③: 点击Import icons 选项以后,导入本地SVG格式图标,然后会看到本地SVG已经被导入到当前页面,如下图:
④:最后选中导入的SVG,在点击Generate Font 选项下载即可
有需要的朋友可以领取支付宝到店红包,能省一点是一点