CSS按鈕常用于網站和應用程序的設計中，是用戶與網站和應用程序進行交互的重要組件之一。加入圖標可以使按鈕更加形象化和易于識別，同時進一步提高用戶的使用體驗。在下面的代碼示例中，我們將學習如何在CSS按鈕中加入圖標。

.button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 4px;
}
.button.icon {
padding-left: 30px;
background-image: url("icon.png");
background-position: 10px center;
background-repeat: no-repeat;
}
.button:hover {
background-color: #3e8e41;
}
.button.icon:hover {
background-color: #3e8e41;
}

首先，我們定義了一個基本的CSS按鈕樣式，其包括背景顏色、字體大小、邊框等樣式，同時為了使按鈕能夠成為一個指針，我們為其添加了cursor: pointer樣式。然后，我們定義了一個新的類名為.button.icon，同時為其添加了一張圖標背景圖片。padding-left: 30px用于讓按鈕中的文本向右邊移動，避免被圖像覆蓋；background-position: 10px center用于設置圖標在按鈕中的位置，此處設置為垂直居中水平偏移10px；background-repeat: no-repeat保證圖像只顯示一次。

最后，我們再進行按鈕的hover效果設定。當用戶鼠標移動到按鈕上方，可以看到按鈕顏色的變化。在新的.button.icon:hover樣式中，我們設置了與基本按鈕樣式相同的按鈕背景顏色變化，以及圖標背景顏色變化效果。

在使用CSS按鈕和圖標時，請一定要注意圖標的分辨率和大小，確保其在不同設備和瀏覽器中均能正常顯示。