CSS圖片圖標(biāo)已經(jīng)成為網(wǎng)頁設(shè)計必不可少的一部分。通過在網(wǎng)頁中使用這些圖標(biāo)，可以使頁面變得更美觀、更有品味。

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

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

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

@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;
}

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

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