CSS是一種常用的樣式定義語言，在網頁設計中起到非常重要的作用。在CSS中，我們可以通過將圖片作為圖標來實現美觀的效果。

.icon {
display: inline-block;
width: 30px;
height: 30px;
background-image: url(icon.png);
background-size: cover;
}

上述代碼中，我們通過設置display屬性為inline-block使圖標能夠與文本排列在同一行，并設置寬高使圖標達到合適的大小。由于我們想要將圖片作為背景圖案，我們使用了background-image屬性，通過指定圖片URL的方式來引入圖片。同時，為了讓圖片完全填充圖標區域，我們設置了background-size為cover。

這樣，我們就成功地將圖片作為圖標使用了。在實際應用中，我們可以通過給圖標增加:hover等偽類來實現更加豐富的效果。例如：

.icon:hover {
transform: rotate(45deg);
}

上述代碼中，我們通過:hover偽類來實現鼠標移上圖標時實現旋轉的效果。

綜上所述，通過CSS將圖片作為圖標使用是一種常用的網頁設計方式，它不僅美觀，而且能夠為用戶帶來更好的視覺體驗。