在很久以前，icon还没有统一的概念，设计师喜欢利用他们天马行空般的想象力在需要的地方画出自己喜欢的icon，这个时候前端的工作就是：
step1:在效果图上找到icon，切割图片

step2:上传icon至服务器

step3:做为img元素或者背景来实现效果

……

在以前，大家开始意识到icon作为网站中路标性质的东西理应统一，杂乱的icon不仅使用户茫然，还使得网站的开发、维护成本大大增加。于是就有了全站统一的icon以及与之配套的使用规范：

这个时候前端做的是：

step1：找到需要使用的icon，获得线上url

step2: 做为img元素或者背景来实现效果

……

相比很久以前，这种方法统一了icon，统一了icon地址，不需要再为更改某个icon而抓狂。但是却给css sprite带来了一个问题！因为每个icon的url都分开，加载页面时会有N多的http请求，一下子使原本牛B的页面变成牛D甚至牛E。于是大家都开始把这个唯一的url作为获取icon的简便途径，icon图片本身还是合并在页面整体的背景图里面。但这样一来，icon的维护成本有高了。

思考：既然网站已经开始统一icon，那何不将所有icon合并在几张背景图上来方便调用呢？

尝试开始：

已有规范1：中文站目前绝大多数的icon是12px和16px两种，其中12px的icon是指高度为12px，宽度12px左右（不一定12px），见上图说明，16px的icon宽高都为16px；

已有规范2： 中文站目前主要正文字号就12px和14px两种；

已有规范3：中文站目前行高主要是1.5倍和1.8倍两种；

已有规范4：中文站目前的间距是8px；

基于以上规范，我们把全站的icon分成3类，按照一定的规律排布在3张不同的背景图片上,每张图片大小不超过15k,如下图所示：

每个icon都有12px和16px两个版本，两个版本排在一行上， 上下每行间距40px。纵向第一排icon都是12px大小的，每个icon的中心对齐在距图片左边14px的线上，纵向第二排icon以416px中心线对齐。==，这些数字是怎么来的？

首先、40px和400px只是经验值，熟悉css sprite的人都知道给icon留空隙用的，对于目前的中文站来说这些预留的空隙可以满足绝大多数的需求。

其次、14px的由来是因为已有的规范1和规范4，icon宽度12px左右同时间距为8。即指icon距文字起始处8px，和文字的间距也是8px（从这里开始–8px–假设为12px的icon–8px–文字文字）。所以icon的中心一定是在8px+8px+12px/2=14px，16px同理为8px+8px+16px/2=16px。这样就可以保证icon在横方向的对齐。

最后、icon在纵向上的对齐则在预设的css中完成，根据已有的规范2和规范3，我们可以为每个icon设置两种class，分别对应行高为16px（12px*1.5）和22px（12px*1.8）的情况。

这样一来，我们就可以通过预设class的方式把网站的icon全部整理完毕。调用时只需要将相应文本display属性设为block，然后根据情况为他添加2个class名即可：

调用示例：

1
2
3
4
5

<ul>
	<li class="icon-a p120018">我是一个icon</li>
	<li class="icon-c p160018">我是一个icon</li>
	<li class="icon-c p120222">我是一个icon</li>
</ul>

class名说明：

class名说明1、第一个class（如”icon-a”），需要使用的icon所在的背景图。icon-a:箭头相关的icon集合；icon-n:数字相关的icon集合；icon-b：品牌相关的icon集合；icon-c：通用普及类icon

class名说明2、第二个class（如”p120222″）指明了具体使用的icon和对应的文本的行高。由”p”+”6位数字组成”。6位数字的前2位指明了该icon的大小。有12和16两种可选；中间2位数字指明了该icon在背景图中的纵向位置；最后2位表示所处文本的行高，有18，21，22，26四种可选。

class名说明3、所有的icon以背景图的形式存在于已合并的4张icon图片中。如果需要使用的文本的行高不在已经预先定义的行高中则需要自行设置背景图片的background-position。

icon及class对照表：

最后一步的工作简单而重要，我们需要把每个icon和他的class名一一对应起来做一个方便查阅的表：

搞定！

这样一来，前端的工作流程将变成：

step1：在表中找到需要的icon

step2：填写class名

简单粗暴，快速提高前端的开发效率，符合我们的特色，呵呵。

当然，这个办法只能解决目前我们网站上80%左右的icon的问题，在右边的icon，16px以上的icon等等都无法试用。另外，这个做法本身也有很大的问题，性能、维护等等…在整个alib体系中，icon这块是提升效率最大，同时也是争议做多的一块。取舍，是人生路上永远存在的难题。

PS：alib是09年中文站UED主要为提升前端开发效率而定的一整套规范和框架，接下来将慢慢地分享一些其中的思想和做法，大家慢慢拍。

来源：http://f2e.me/archives/149