今天我們來學習一下如何制作一個漂亮的CSS圖標，帶有圓形底紋的效果。下面是代碼示例：

首先，我們需要創建一個包含圓形底紋的DIV元素。

.icon {
position: relative;
width: 50px; 
height: 50px; 
border-radius: 50%; 
background-color: #f2f2f2; 
box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 11px #f2f2f2;
}

接下來，我們需要為該DIV元素添加圖標，可以使用Font Awesome等圖標庫。

.icon i {
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);
font-size: 25px;
color: #333;
}

最后，我們使用偽元素before來實現底紋效果。

.icon::before {
position: absolute;
top: -5px;
left: -5px;
content: "";
width: 60px;
height: 60px;
border-radius: 50%;
box-shadow: 0 0 0 5px #f2f2f2, 0 0 0 6px #fff;
}

現在，我們的漂亮的CSS圖標就完成啦！