字体图标-把SVG图标转换成所需要的字体图标

　　小科普：

　　想必小伙伴们多少都了解或使用过字体图标，总体来说优点多于缺点，优点如下图：

• 任意缩放，图标不会失真；
• 可以改变图标颜色；
• 可以设置图标阴影；
• 可以设置透明效果；
• 主流浏览器都支持；
• 可以快速转化形态（做出一些变化，如 :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 选项下载即可