网上有各种用css3画图标，画漫画的代码，实在是有点吊！如果能为自己的网站也绘制一套css3图标，那么就省去了用小图片的力气。虽然说各大浏览器对css3的支持性还不尽相同，但是大势所趋，写写更健康。
首先，我们要做到使用简单，简单到给元素加个类就能使用图标，然后我们还要支持可定制，比如颜色，大小。看下面的代码：
我们只要给a标签加上两个类就可以让它变成一个图标。之所以加两个，是因为类css3-icon实现的图标的基本样式，而css3-icon-search则实现了具体的search图标样式：
伪元素肯定是要用上的，而且要相对于.css3-icon绝对定位。我们希望图标的大小是可以自定义的，所以在:before和:after伪元素里我们使用了相对单位em，为此要在.css3-icon中对font-size重新赋初始值。
接下来我们画一个search图标：
在before伪元素中，利用border-radiuis画一个圆，在after伪元素中，利用transform画出放大镜的手柄。为了支持图标缩放，这里都使用了百分比，效果如下：
要修改大小的话只要改变.css3-icon中的width，height，font-size即可（需要等比例改变大小）。但是还有一个问题，目前不支持自定义颜色。我们还需要改进代码，在.css-icon中设置颜色，具体图标的颜色则采用继承的方式：
以上就是所有代码了，其他的图标都可以按这个框架来实现，利用旋转和border特性来画图标，然后在global style里面自定义尺寸和颜色就ok了。
-------------------------------------------------------华丽的分割线---------------------------------------------------------------------------------------------------------------------
以上写的代码还是有问题的，就是在.css3-icon里面设置了font-size:10px;本来这样做是为了方便后面使用em单位，但是没有考虑到chrome不支持12px以下的字体，为了保证兼容性又方便计算，最好是设置font-size:100px;后面再使用em单位时直接除以10就行了，相当于0.01em=1px。
这样一来，.css3-icon中的width，height，font-size值都是100px了，使用时用js脚本可以很方便的修改。而且font-size最小可到12px，就是说width，height最小值也是12px，12x12的图标，相当于小字体的高度了，完全可以适用于各种场合~
最后，根据修改后的方案，再来画一个太极图标，效果如下：
下面是html代码和css代码：
我给他加上了一个hover旋转动画，酷炫的太极！