icons-icomoon.png
背景一般都是使用大圖片來(lái)做的耕餐，小圖片是作為一般常作為圖標(biāo)使用斤程。
每個(gè)圖標(biāo)一個(gè)小圖片寸癌，會(huì)有效率和管理的麻煩榆浓。于是聰明的前端把多個(gè)小圖標(biāo)合成一張圖片處理于未，這種圖片被稱為sprite圖，國(guó)人稱為雪碧圖哀军。
如何使用雪碧圖沉眶，給頁(yè)面加上圖標(biāo)？只需要三步
- 設(shè)置標(biāo)簽的寬度和高度
width:18px;
height:18px;
這里的`18px`只是示例值杉适，是圖標(biāo)的真實(shí)大小谎倔，需要具體測(cè)量。
提示：如果是行內(nèi)標(biāo)簽猿推，需要設(shè)置`display`為`inline-block`片习。
- 設(shè)置圖片路徑
background-image : url(../img/sprite.png);
background-repeat : no-repeat;
提示：需要設(shè)置圖片不平鋪捌肴，避免不必要的錯(cuò)誤。
- 設(shè)置圖片顯示起始位置
background-position : -400px -500px;
這里的400px只是示例值藕咏，是圖標(biāo)的左上角與圖片左上角之間的水平距離状知，500px也是示例值，是圖標(biāo)的左上角與圖片左上角之間的垂直距離孽查，需要具體測(cè)量饥悴。不要忘記在數(shù)值前加上-。至于為啥加上-是平面幾何中平移向量的概念盲再，有興趣的童鞋可以進(jìn)一步的了解一下西设。
以上第二步和第三步可以使用一條聲明完成，如下：
background : url(../img/sprite.png) -400px -500px no-repeat;
但是答朋，一定要記住贷揽，非零數(shù)字前面一定會(huì)有-。
OK梦碗，三步完成CSS使用雪碧圖的小圖標(biāo)禽绪。你get了嗎？
如有問(wèn)題洪规，請(qǐng)?jiān)谙旅媪粞浴?/p>
