本系列文章，若是沒有特別說明，兼容安卓4.0.4+php
這裏咱們把圖標分爲三種：背景圖片，直接繪製，@font-face。如無特殊狀況，圖標的標籤採用i標籤css
背景圖片
首先咱們會選擇sprite形式，把全部的圖標都放在一個大圖中，而後考慮到retina屏，因此咱們的圖標應該設計爲實際大小的2倍，而後設置background-size爲實際大小。如下面的msg icon爲例：html
圖中的每一個icon大小爲24px，實際應用時，咱們是以12px來使用的：html5
%icon-msg{ display: inline-block; vertical-align: -2px; background:url(../images/icon-msg.png) no-repeat; background-size:26px 26px; // 整個sprite圖片大小的一半，注意不要採用50%，百分比是按元素大小來計算的，而不是背景圖片大小 } .icon-info{ @extend %icon-msg; background-position: -14px 0; width: 12px; height: 12px; } .icon-alert{ @extend %icon-msg; background-position: 0 -14px; width: 12px; height: 12px; } ...
固然有時候圖標比較少，咱們爲了減小請求，也能夠直接把圖片轉成base64格式寫在css中，這裏推薦一個在線轉的工具：Encode Data URLnode
直接繪製
憑藉優秀的css3，咱們能夠應用其中一些屬性繪製一些簡單的圖標，如箭頭等，這裏咱們以繪製checkbox兩種狀態爲例：css3
html：git
<i class="icon-checkbox active"></i> <i class="icon-checkbox"></i>
scss：github
$primary: #0078e7 !default; .icon-checkbox{ width: 16px; height: 16px; display: inline-block; vertical-align: middle; border: 1px solid #ccc; background-color: #fff; line-height: 1; text-align: center; margin-right: 5px; &.active{ border-color: $primary; &::after{ content: ""; width: 8px; height: 3px; border-bottom: 2px solid $primary; border-left: 2px solid $primary; display: block; margin-top: 3px; margin-left: 2px; @include rotate(-45deg); } } }
active狀態，經過after生成一個長方形，而後設置其border-bottom和border-left，再經過css3的rotate旋轉45便可，那個勾就是兩條邊框。web
@font-face
以sandal的字體圖標爲例，若是你以爲這些圖標不適合你，你能夠本身在icomoon中挑選合適的。sass
sandal中字體圖標使用方法：
一、下載sandal放在d盤目錄下，在你的scss文件中導入sandal的base文件（若是不須要生成樣式，則導入function文件便可）及font-face文件
@import "d:/sandal/base"; @import "d:/sandal/ext/font-face/font-face";
二、根據本身須要覆蓋font-face文件夾中的變量，注意變量應該在導入font-face以前，能夠覆蓋的變量以下：
$fontFamily: icomoon !default; $fontFilePath: "../fonts/icomoon" !default; $fontClassPrefix: if !default; // icon-font $fontClassAllSwitch: true !default; $fontClassOutput: () !default; $fontPseudo: true !default; // 是否採用僞元素（before）生成圖標
下面咱們改變下class的前綴，而後輸出全部的字體class
@import "d:/sandal/base"; $fontClassPrefix: icon-font; @import "d:/sandal/ext/font-face/font-face";
三、把font-face目錄下的fonts文件夾拷貝進解析後的css文件夾同目錄下，如css，js，fonts，images同目錄
根據上面的配置，貼出下面的html和解析後的css代碼：
html:
<i class="icon-font-wifi"></i> <i class="icon-font-comment"></i> <i class="icon-font-user"></i> <i class="icon-font-map"></i> ...
css:
.icon-font-wifi::before, .icon-font-comment::before, .icon-font-user::before, .icon-font-map::before,...{ -webkit-box-sizing: border-box; box-sizing: border-box; } @font-face { font-family: icomoon; font-weight: normal; font-style: normal; src: url("../fonts/icomoon.eot"); src: url("../fonts/icomoon.eot?#iefix") format("eot"), url("../fonts/icomoon.svg#icomoon") format("svg"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype"); } .icon-font-wifi::before, .icon-font-comment::before, .icon-font-user::before, .icon-font-map::before,...{ display: inline-block; vertical-align: -2px; font-family: icomoon; font-size: 1.6rem; line-height: 1; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-font-wifi::before { content: