小（字体）图标的创建和应用

 1.设计师做到的图片(尽量是纯色的图片)

2.利用vector Magic工具导成svg格式的文件(下载地址：http://rj.baidu.com/soft/detail/18913.html?ald)

2.1 此工具的用法，可以上网自行百度查询

3.导好的svg文件后，此时需要找到字体图标制作的网站Icomoom.io (网址:https://icomoon.io/)

4.下载好的文件

打开后运行就能看到效果了。取其style.css和fonts可以直接应用于项目当中，

图标字体运用以及其优势与劣势：

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题，经过实践发现了一种比较好的解决方案，图标字体化。在微社区项目中，有很多小的Icon（图标），如分享、回复、赞、返回、话题、访问、箭头等，这些Icon（图标）一般都是纯色的。开始制作时考虑用双倍大小的Sprite图，通过CSS样式设置只显示二分之一尺寸，这样在Retina屏上显示的大小是正常的，一旦放大屏幕后图标又变得模糊不清，测试的效果不是很理想，后来又考虑多套图标适配方案、SVG矢量图等，都因为种种原因放弃掉了（如多套图标繁琐、Android 2.3不支持SVG格式等），为了解决以上问题，用到了图标字体， 通过查阅Icon Font相关技术博客和文章，并结合在项目中实际应用梳理出了图标字体化浅谈这篇文章，望对正在学习和使用的重构同学们有一个参考和帮助！文章内的内容参考了相关技术文章并加上自已的理解，错误在所难免，欢迎批评指正。下图为微社区用到的部分图标字体。

优势：

轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化

灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

兼容性：网页字体支持所有现代浏览器，包括IE低版本。详细兼容性可以点击这里。

除了以上优势之外，当然也有劣势：
1、图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。
2、使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。
3、创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

（http://www.frontopen.com/1906.html）