我们把图标分为三种：背景图片，直接绘制，@font-face。如无特殊情况，图标的标签采用i标签。
1.背景图片
我们会选择sprite形式，吧所有的图标放大一个大图上， 考虑到retina屏，所以我们图标设计为实际大小的2倍，然后设置background-size 为实际大小。示例：
图标大小为24px,实际为12px,
.icon-msg,.icon-info{
display: inline-block;
vertical-align: -2px;
background:url(../images/icon-msg.png) no-repeat;
background-size:26px 26px; // 整个sprite图片大小的一半，注意不要采用50%，百分比是按元素大小来计算的，而不是背景图片大小
}
.icon-info{
background-position: -14px 0;
12px;
height: 12px;
}
当然有时候图标比较少，我们为了减少请求，也可以直接把图片转成base64格式写在css中，这里推荐一个在线转的工具：Encode Data URL
2.借助css3直接绘制
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" name="viewport"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta content="telphone=no" name="format-detection"> <title>图标</title> <style type="text/css"> .icon_checkbox{ width: 16px; height: 16px; display: inline-block; vertical-align: middle; border:1px solid #ccc; background-color: #fff; line-height:1px; text-align:center; position: relative; margin-left: 200px;} .active{ border-color: #0078e7;} .active::after{ content: ""; width: 8px; height: 3px; border-bottom: 2px solid #0078e7; border-left: 2px solid #0078e7; display: block; margin-top: 3px; margin-left: 2px; -webkit-transform:rotate(-45deg); } </style> </head> <body> <i class="icon_checkbox active"></i> <i class="icon_checkbox"></i> </body> </html>
凭借优秀的css3，我们可以应用其中一些属性绘制一些简单的图标，如箭头等，这里我们以绘制checkbox两种状态为例：
active状态，通过::after生成一个长方形，然后设置其border-bottom和border-left，再通过css3的 rotate旋转45 即可，那个勾就是两条边框。
3. @font-face 字体图标
字体图标 http://www.bootcss.com/p/font-awesome/
漠大博客原文http://www.w3cplus.com/mobile/mobile-terminal-refactoring-icons.html