随着时代的变迁与技术的不断的更新，在当今这个时代，Web中的图标(Icons)不再仅仅是局限于<img>。除了<img>直接调用Icons文件之外，还有Sprites(俗称雪碧图)、Icon Font(字体图标)、SVG Icon等等。今天我们就来一起探讨一下这些方法在Web中实现Icon的利弊。

Sprite(雪碧图)在Web运用中已不是新技术，但大部分同学都还停留在位图的Sprite运用，比如.png图的合成。而这种技术对于现在的Web页面而言并不完美，比如位图在Retina屏幕带来的图标不清晰等现像，是我们技术人员必须面对的一件事情。而今天要说的，就是如何避开使用位图制作Sprite，来适应所有屏幕的显示。而这种技术就是SVG的Sprite来替代早期的位图Sprite。

当你为一个网站建一套图标系统的时候，你有几种选择。如果你知道图标需要是像素画图片的时候,你可能会用到css sprites也就是雪碧.而如果图标需要是矢量图的时候(现在已越来越普遍)，你有两种选择，他们是ƒsvg和图标字体。

网页字体图标到现在来说并不是一个新话题，大家都知道是通过@font-face来实现的。虽然有很多地方介绍如何制作属于自己的网页字体图标，但大部分都还是需要收费。让你我们这等屌丝无法接受。除了这些之外，其实还有一些制作矢量图的软件可以实现自己的图标。在这篇译文中，就详细介绍了如何使用Inkscape软件制作出自己的网页字体图标。

图片是有诸多优点的，然而目前在网站设计这行业面临各种各样的挑战。图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。图片还有一个缺点就是不能很好的进行“缩放”，因此，有时候在“响应式设计”中需要使用图像的最好解决方案就是不去使用图片。由于位图给Web制作带这诸多的不便，为了解决这些问题，CSS3给大家带来一个新的属性@font-face。

使用@font-face制作图标已不是什么秘密，也不是什么新技术，在互联网上这样的教程铺天盖地。但是我们依然给大家介绍一篇@font-face制作图标的教程。这篇教程主要向大家阐述了”为什么要用和如何使用字体制作图标“，从教程中，你可以找到@font-face制作图标的优势与不足，同时也能找到要如何得到制作图标的字体。

使用@font-face运用本地字体，制作一些特殊的字体效果非常方便，特别是使用@font-face制作图标，更是让我们省了很多事情。但我们使用的一般都是别人提供好的图标字体，这样一来就有很多同学在问，如何制作自己需要的字体呢？或者说如何将自己需要的图标转换成自己需要字体，在运用到web页面中？这个问题问得很好，其实实现思路并不复杂，我们需要通过一些适量图的软件，绘制出矢量图标，然后通过一定的工具将这些图标转换成需要的字体。或许你会说，这不是废话，还是没有谈到怎么做出来。大家不用着急，根据Martin Gittins的《How to turn your icons into a web font》文章介绍，你只需要一款制作矢量图的应用软件，和一个免费的Web应用程序IcoMoon将矢量图转换成Web字体工具就可以轻松的帮你实现。如果你不信，不仿往下看，我想你看后，以后再也不会使用位图了。（^_^）

前段时间在《@font-face制作Web Icon》一文收集了三种webfont通过CSS3的@font-face来制作Icon图标。现在在网上最为流行的是@robmadole和@supercodepoet两位大师制作的Font Awesome：

@font-face是CSS3中有关于字体设置的属性，通过@font-face可以将本地字体设置为Web页面字体，并能兼容所有浏览器，使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上，不过这样一来很多人担心影响性能问题。鱼和熊掌不能兼得嘛，我们就不在为这个问题说太多的话了，不过我今天要与大家分享的主题和这个@font-face还是有很在关系的，使用他配合一定的字体来制作Web页面中的Icon图标。初一看有点不实际，以前的Icon都是依靠图片来完成，怎么可能用字体就能实现呢？如果你以前有用过HTML的实体符，我想就不会那么惊奇了。

Nicolas Gallagher在Pure CSS GUI icons中使用纯CSS3制作的各种ICON的DEMO，让我再次领会了CSS3的强大。