什么是icon？讓我們先來看一個例子：
我們以簡書為例子，圖中看到的用圓圈起來的部分都是icon

這個時候你就想問了，這不就是幾張圖片么？
不，它不是圖片，而是文字
什么？？這怎么可能是文字，文字怎么會是這樣的？...

icon到底是什么

正如你所看到的，現(xiàn)在市面上大多數(shù)網(wǎng)頁使用的圖標(biāo)都是類似這樣的形式，也有不少icon圖標(biāo)庫可供我們使用
它的實現(xiàn)方式有：

• image
• CSS Sprites
• Icon Font
• SVG（目前來看，是最完美的）
• CSS手寫icon（太麻煩，而且自己做往往不好看（這時候你需要一個UI小姐姐的幫助））

為什么說現(xiàn)在大多數(shù)網(wǎng)頁里的圖標(biāo)是文字？

首先我們需要了解：
如何讓頁面展示一個圖標(biāo)呢？我們可以把圖標(biāo)當(dāng)成文字來操作，步驟如下：

• 在頁面上放入該圖標(biāo)的 unicode 碼 （可以自己創(chuàng)建一個）
• 讓該元素使用我們自定義的字體
• 字體對應(yīng)著我們自己創(chuàng)建的字體庫文件
• 字體庫文件里有關(guān)于該 unicode 碼的外形描述

這里就要說到第一種方法：iconfont（阿里巴巴官方矢量圖標(biāo)庫）

下面是具體用法范例，大家可以一試：

<p>&#xe600;</p>
<style>
@font-face {
  font-family: 'iconfont';
  src:url('http://at.alicdn.com/t/font_1475388520_7015634.ttf') format('truetype')
}
                    
p{
  font-family: iconfont;
}  
</style>

或者

<span class="icon-qq"></span>
<style>
@font-face {
  font-family: "hello";
  src: url('//at.alicdn.com/t/font_1475388520_7015634.ttf') format('truetype')
}
.icon-qq:before { font-family:"hello";content: "\e600"; } 
</style>

CSS Sprites

CSS Sprites在國內(nèi)很多人叫css精靈（雪碧圖），是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當(dāng)前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。

加速的關(guān)鍵，不是降低質(zhì)量，而是減少個數(shù)。傳統(tǒng)切圖講究精細，圖片規(guī)格越小越好，重量越小越好，其實規(guī)格大小無所謂，計算機統(tǒng)一都按byte計算?？蛻舳嗣匡@示一張圖片都會向服務(wù)器發(fā)送請求。所以，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。

• 原理
  CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置。

• 優(yōu)點
  1.利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優(yōu)點，也是其被廣泛傳播和應(yīng)用的主要原因；
  2.CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。
  3.解決了網(wǎng)頁設(shè)計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網(wǎng)頁的制作效率。
  4.更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網(wǎng)頁的風(fēng)格就可以改變。維護起來更加方便。

• 缺點
  誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點，如下：
  1.在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，你的圖片如果不夠?qū)?，很容易出現(xiàn)背景斷裂；
  2.CSS Sprites在開發(fā)的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；
  3.CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動css。
  4.CSS Sprites非常值得學(xué)習(xí)和應(yīng)用，特別是頁面有一堆icon（圖標(biāo)）?？傊芏鄷r候大家要權(quán)衡一下利弊，再決定是不是應(yīng)用CSS Sprites。

例子：

.bg_sprite{background-image:url(/整圖地址); background-repeat:no-repeat}

引用該類 .. 然后在元素中逐一定義背景坐標(biāo) .. 以下為關(guān)鍵屬性 ..

#ico1 {width:容器寬度;height:容器高度;background-position:X坐標(biāo) Y坐標(biāo)}
#ico2 {width:容器寬度;height:容器高度;background-position:X坐標(biāo) Y坐標(biāo)}
#ico3 {width:容器寬度;height:容器高度;background-position:X坐標(biāo) Y坐標(biāo)}
.nav {width:容器寬度;height:容器高度;background-position:X坐標(biāo) Y坐標(biāo)}

必須要限定容器大小符合背景圖元素位置 .. 另外 .. XY軸是相對于整張圖片的左上角來算的 .. 所以取值一定要算清楚。

使用 image 實現(xiàn)

• 注意事項：
  img 的大小設(shè)置
  可以只設(shè)置寬度／高度，圖片會自適應(yīng)縮放
  img 的 vertical-align
• 請求數(shù)過多
  因為每一個請求都是需要花時間去建立的，HTTP 1.1 時代，客戶端（瀏覽器）是慢的，但如果升級到了 HTTP 2，100個請求跟1個請求是差不了多少的
  在服務(wù)器端（server），比如是用 php、java 實現(xiàn)的后端，請求過多，一般會導(dǎo)致線程過多，或大或小都會產(chǎn)生一定的壓力
  另外，請求過多，對網(wǎng)站流量也會有一定的影響，流量要要花錢的

CSS手寫icon

• CSS 能畫圓，能畫方，為什么不能畫 icon？
• 參考網(wǎng)站：CSS ICON
• 兼容性：IE支持不太好，比如border-radius IE8-不支持

SVG

• svg 可以作為圖像的地址直接傳入：<\img src="svg">，但是這樣依然會造成請求數(shù)過多* 還可以使用 SVG "sprites"
• google：npm svg sprites，看排名靠前的，比如 svg-sprite
• 它是以標(biāo)簽的形式來組織所有的圖片的，移動端首選* 優(yōu)點：可以方便的修改 icon 的大小、顏色，縮放沒有鋸齒