在網頁設計中，有時候需要在圖片上加上一些圖標，以便更好地說明該圖片的含義或者起到美化效果。這種情況下，就需要使用CSS進行處理，下面我們來看看如何實現。

首先，在HTML頁面中引入需要加上圖標的圖片，如下所示：

<img src="圖片地址" alt="圖片描述">

接下來，在CSS樣式表中定義該圖片的樣式，同時設定圖標的樣式。如下所示：

img{
position: relative; /*使得圖標在圖片中定位*/
max-width: 100%; /*使得圖片在容器中自適應大小*/
}
img::before{
content:""; /*定義偽元素*/
background-image: url("圖標地址"); /*指定背景圖片*/
background-position: center center; /*圖標絕對居中*/
background-repeat: no-repeat; /*防止圖標重復出現*/
position: absolute; /*使得圖標定位于已定位的父元素內*/
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*實現居中定位*/
width: 寬度px; /*設置自定義圖標寬度*/
height: 高度px; /*設置自定義圖標高度*/
}

在上述CSS代碼中，使用了CSS偽元素 ::before 來實現添加圖標的功能，同時指定圖標的位置和大小，定位也是使用了CSS的 position 屬性。此外，由于偽元素的加入，這里需要使用 background-image 而非 background 屬性進行設置。

通過上述步驟，為圖片添加圖標就完成了。當然，如果需要為不同的圖片添加不同的圖標，可以通過給不同的圖片指定不同樣式類的方式來實現。