什么是icon？讓我們先來看一個(gè)例子：
我們以簡書為例子续捂，圖中看到的用圓圈起來的部分都是icon
這個(gè)時(shí)候你就想問了垦垂，這不就是幾張圖片么？
不牙瓢，它不是圖片劫拗，而是文字
什么？矾克？這怎么可能是文字页慷，文字怎么會是這樣的？...
icon到底是什么
正如你所看到的聂渊，現(xiàn)在市面上大多數(shù)網(wǎng)頁使用的圖標(biāo)都是類似這樣的形式差购，也有不少icon圖標(biāo)庫可供我們使用
它的實(shí)現(xiàn)方式有：
- image
- CSS Sprites
- Icon Font
- SVG（目前來看，是最完美的）
- CSS手寫icon（太麻煩汉嗽，而且自己做往往不好看（這時(shí)候你需要一個(gè)UI小姐姐的幫助））
為什么說現(xiàn)在大多數(shù)網(wǎng)頁里的圖標(biāo)是文字欲逃？
首先我們需要了解：
如何讓頁面展示一個(gè)圖標(biāo)呢？我們可以把圖標(biāo)當(dāng)成文字來操作饼暑，步驟如下：
- 在頁面上放入該圖標(biāo)的 unicode 碼 （可以自己創(chuàng)建一個(gè)）
- 讓該元素使用我們自定義的字體
- 字體對應(yīng)著我們自己創(chuàng)建的字體庫文件
- 字體庫文件里有關(guān)于該 unicode 碼的外形描述
這里就要說到第一種方法：iconfont（阿里巴巴官方矢量圖標(biāo)庫）
下面是具體用法范例稳析，大家可以一試：
<p></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)用處理方式弓叛。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去彰居，這樣一來，當(dāng)訪問該頁面時(shí)撰筷，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了陈惰。對于當(dāng)前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的毕籽，所以無需顧忌這個(gè)問題抬闯。
加速的關(guān)鍵，不是降低質(zhì)量关筒，而是減少個(gè)數(shù)溶握。傳統(tǒng)切圖講究精細(xì)，圖片規(guī)格越小越好蒸播，重量越小越好睡榆，其實(shí)規(guī)格大小無所謂萍肆，計(jì)算機(jī)統(tǒng)一都按byte計(jì)算≌陀欤客戶端每顯示一張圖片都會向服務(wù)器發(fā)送請求塘揣。所以，圖片越多請求次數(shù)越多碉纳，造成延遲的可能性也就越大勿负。
原理
CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”劳曹，“background- repeat”奴愉，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置铁孵。優(yōu)點(diǎn)
1.利用CSS Sprites能很好地減少網(wǎng)頁的http請求锭硼，從而大大的提高頁面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)蜕劝，也是其被廣泛傳播和應(yīng)用的主要原因檀头；
2.CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和岖沛。
3.解決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾暑始，只需對一張集合的圖片上命名就可以了，不需要對每一個(gè)小元素進(jìn)行命名婴削，從而提高了網(wǎng)頁的制作效率廊镜。
4.更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式唉俗，整個(gè)網(wǎng)頁的風(fēng)格就可以改變嗤朴。維護(hù)起來更加方便。缺點(diǎn)
誠然CSS Sprites是如此的強(qiáng)大虫溜，但是也存在一些不可忽視的缺點(diǎn)雹姊，如下：
1.在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片衡楞，還要留好足夠的空間吱雏，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好瘾境，最痛苦的是在寬屏歧杏，高分辨率的屏幕下的自適應(yīng)頁面，你的圖片如果不夠?qū)捈娜福苋菀壮霈F(xiàn)背景斷裂；
2.CSS Sprites在開發(fā)的時(shí)候比較麻煩陨献，你要通過photoshop或其他工具測量計(jì)算每一個(gè)背景單元的精確位置盒犹，這是針線活，沒什么難度，但是很繁瑣急膀；
3.CSS Sprites在維護(hù)的時(shí)候比較麻煩沮协，如果頁面背景有少許改動，一般就要改這張合并的圖片卓嫂，無需改的地方最好不要?jiǎng)涌对荩@樣避免改動更多的css，如果在原來的地方放不下晨雳，又只能（最好）往下加圖片行瑞，這樣圖片的字節(jié)就增加了，還要改動css餐禁。
4.CSS Sprites非常值得學(xué)習(xí)和應(yīng)用血久，特別是頁面有一堆icon（圖標(biāo)）“锓牵總之很多時(shí)候大家要權(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 實(shí)現(xiàn)
- 注意事項(xiàng)：
img 的大小設(shè)置
可以只設(shè)置寬度／高度筑舅，圖片會自適應(yīng)縮放
img 的 vertical-align - 請求數(shù)過多
因?yàn)槊恳粋€(gè)請求都是需要花時(shí)間去建立的，HTTP 1.1 時(shí)代陨舱，客戶端（瀏覽器）是慢的翠拣，但如果升級到了 HTTP 2，100個(gè)請求跟1個(gè)請求是差不了多少的
在服務(wù)器端（server）隅忿，比如是用 php心剥、java 實(shí)現(xiàn)的后端，請求過多背桐，一般會導(dǎo)致線程過多优烧，或大或小都會產(chǎn)生一定的壓力
另外，請求過多链峭，對網(wǎng)站流量也會有一定的影響畦娄，流量要要花錢的
CSS手寫icon
- CSS 能畫圓，能畫方弊仪，為什么不能畫 icon熙卡？
- 參考網(wǎng)站：CSS ICON
- 兼容性：IE支持不太好，比如
border-radiusIE8-不支持
SVG
- svg 可以作為圖像的地址直接傳入：
<\img src="svg">励饵，但是這樣依然會造成請求數(shù)過多* 還可以使用 SVG "sprites" - google：npm svg sprites驳癌，看排名靠前的，比如 svg-sprite
- 它是以標(biāo)簽的形式來組織所有的圖片的役听，移動端首選* 優(yōu)點(diǎn)：可以方便的修改 icon 的大小颓鲜、顏色表窘，縮放沒有鋸齒
