移动端重构—

移动端重构——图标

我们把图标分为三种：背景图片，直接绘制，@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.iconfont.cn/

漠大博客原文http://www.w3cplus.com/mobile/mobile-terminal-refactoring-icons.html