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

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

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

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

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

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

在Web中很多场景中都会使用到Icon，那么就会面临Icon和文本对齐的处理。而这个对齐效果的处理又不是一件轻易的事情，特别是面又众多不同移动终端的情形之下。那么今天这篇文章就来和大家一起探讨一下这方面的话题。

Web中对于Icon的使用已经是非常频繁的一件事情了，而且很有图标的使用会让你的Web应用程序或Web网页面变得更具可交互性和可使用性。早前在《Web中的图标》一文中和大家一起探讨了如何在Web中使用图标。其中不同的使用方式都具有各自的优势，但随着技术的革新，其中SVG的图标在Web中的使用也越来越频繁，并且其具备的优势也越来越明显。正因如此，在自己的项目中使用SVG的图标的场景也越来越多，因此，今天想和大家一起聊聊如何在Vue的项目中更好的使用SVG图标。

Icon图标在Web应用或Web页面中起着至关重要的作用。它除了起到一定装饰作用之外，还可以在不添加任何文本信息的情况之下向用户传达正确的含义。在当今的Web开发中，有许多不同的方式将图标运用于Web应用或Web页面上。同样，在社区中也有很多介绍Icon图标系统构建的方法，比如早期的雪碧图，字体图标以及SVG Sprites等。但是今天我想从不同的角度来和大家聊聊，如何基于React框架下构建属于自己的SVG图标系统。感兴趣的同学，欢迎继续往下阅读。