CSS可以讓我們使用圖片作為網站的圖標，讓網站更加美觀和個性化。下面就來看一下如何使用CSS將圖片變成圖標。

.icon {
background-image: url('img/icon.png');
background-size: cover;
width: 50px;
height: 50px;
}

首先，先在CSS中定義一個類名為“icon”的樣式。在該樣式中，使用“background-image”屬性將圖片作為背景圖像，其中“url”指定了圖片的路徑。使用“background-size: cover”可以將圖片完全填充在圖標中，讓圖標顯示更加清晰。接著使用“width”和“height”屬性來控制圖標的大小。

<i class="icon"></i>

接著，在HTML中使用“i”標簽來引用之前定義的“icon”樣式，同時清空標簽之間的內容。這個時候，圖標就已經成功地顯示在網頁上了。

需要注意的是，如果是SVG格式的圖片，則可以直接在HTML中使用“svg”標簽來引用圖片，不需要另外定義樣式。

通過上述方法可以輕松將圖片變成圖標，讓網站看起來更加專業和有趣。