當我們設計網頁時，經常會用到各種按鈕，而圓形按鈕是一種非常常用的樣式之一。下面就介紹一下如何用CSS實現帶圖標的圓形按鈕。

/* CSS代碼 */
.circular-button {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
background-color: #007fff;
color: #ffffff;
}
.circular-button i {
font-size: 24px;
margin-top: 12px;
}

以上CSS代碼中，我們定義了一個名為circular-button的圓形按鈕類。其中，display: inline-block使元素成為內聯塊級元素，使之可以有寬度、高度等屬性；width和height分別為元素的寬度和高度；line-height使文本垂直居中；text-align: center使文本水平居中；border-radius: 50%讓元素呈現圓形；background-color: #007fff為按鈕定義背景顏色；color: #ffffff為按鈕定義文本顏色。

在類的內部，我們又定義了一個i標簽的樣式，用于為按鈕添加圖標。setFont-size: 24px為圖標定義大小，margin-top: 12px為圖標與按鈕之間留出一定的間距。

最后，在HTML中使用該類，即可創建一個圓形按鈕，并為其添加圖標。

以上為圓形按鈕的HTML代碼，我們只需要在a標簽中添加我們定義的類Circular-button，并在其中嵌套一個i標簽，并給它注意的圖標（上例中為搜索圖標）即可。

總之，圓形按鈕樣式簡潔、美觀，可搭配圖標使用，為頁面增添不少亮點。我們只需要定義自己想要的按鈕樣式和圖標即可，極大地方便了Web設計師的工作。