小圖標是網站設計中常用的元素，可以為網站增色不少。大家有沒有想過這些小圖標是如何實現的呢？實際上，常用的實現方式是通過CSS樣式將一個較大的圖片切割成多個小圖標，并通過CSS代碼來進行引用。

.icon{
width: 20px;
height: 20px;
background: url('img/icon.png') no-repeat;
}
.icon-home{
background-position: 0 0;
}
.icon-message{
background-position: -20px 0;
}
.icon-favorite{
background-position: -40px 0;
}

上述代碼中，.icon是該小圖標的公共樣式類，由于背景為一張大圖，因此需要固定圖標的寬高，并設定背景為該大圖。.icon-home,.icon-message,.icon-favorite則分別為不同的圖標，通過background-position來設置不同圖片位置，從而實現切割大圖并引用小圖標的效果。

另外，如果想要使用其他圖標，只需要在該大圖中添加對應的小圖標，并在CSS代碼中新增對應類，同樣可以實現圖標的引用。