在網頁開發過程中，圖標的使用非常重要，它們可以增加頁面的美觀度和可讀性。在CSS中，我們可以使用字體圖標或SVG圖標來呈現我們需要的圖標。而今天我們要討論的是如何用CSS顯示方塊圖標。

首先，我們需要使用CSS中的偽類選擇器::before或::after來實現方塊圖標的插入。

.icon::before {
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-color: #000;
}

在上面的代碼中，我們在class為.icon的元素之前插入了一個方塊圖標。我們使用了content屬性來插入內容，這里是一個空格。由于使用了content屬性，我們設置的樣式只會影響偽元素，不會影響實際的HTML元素。因此，我們需要設置display: inline-block，使偽元素變成一個行內塊元素，然后設置寬度和高度，最后設置背景顏色。

除了使用背景顏色，我們還可以使用邊框樣式來創建方塊圖標。

.icon::before {
content: " ";
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #000;
}

在上面的代碼中，我們只需要將背景顏色改成邊框樣式即可。這里我們設置了一個1像素的黑色實線邊框。

總結一下，在CSS中實現方塊圖標可以通過使用偽類選擇器和設置寬度、高度、背景顏色或邊框樣式來實現。使用方塊圖標可以增加頁面的可讀性和美觀度，以便更好地傳達信息。