CSS圖片圖標已經成為網頁設計必不可少的一部分。通過在網頁中使用這些圖標，可以使頁面變得更美觀、更有品味。

.icon {
display: inline-block;
width: 20px;
height: 20px;
background: url('icon.png') no-repeat;
}

上面的代碼使用了background屬性來設置圖標的背景圖片。我們可以使用CSS來調整圖片的位置和大小。通過將display屬性設置為inline-block，圖標可以和文本排列在一行。

除了設置背景圖片外，我們還可以使用CSS3的font-face屬性來引用自定義圖標字體。這種做法可以減少頁面的請求次數，從而優化頁面的加載速度。

@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
font-weight: normal;
font-style: normal;
}
.icon {
font-family: 'iconfont';
font-size: 20px;
color: #666;
cursor: pointer;
}

使用自定義圖標字體的好處在于，字體可以使用CSS進行調整。我們可以通過修改font-size、color等屬性來調整圖標的大小和顏色。同時，由于使用的是字體，所以可以像文字一樣進行復制、粘貼和編輯。

總之，在網頁設計中使用CSS圖片圖標是非常常見的。無論使用背景圖片還是自定義字體，都可以為網頁帶來更加美觀、實用的體驗。