CSS盒子是Web開發中不可或缺的一部分。除了布局外，盒子還可用于制作圖標，下面我們來學習如何使用CSS盒子制作圖標。

.icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 24px;
}

上面的CSS代碼是制作一個紅色圓形圖標的樣式。首先通過給盒子設置寬、高和圓角屬性，使其變成一個圓形。然后設置背景色為紅色。

接下來使用flex布局使圖標內文字居中，同時字體顏色為白色，字號為24px。

使用上述樣式，我們可以通過以下HTML代碼來生成圖標：

<div class="icon">A</div>

其中A為圖標內的文字。這樣就制作出了一個簡單的圓形圖標。

需要注意的是，在實際開發中，可以根據需要調整樣式中的各個屬性值，從而實現不同的圖標樣式。