在网页开发过程中，图标的使用非常重要，它们可以增加页面的美观度和可读性。在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中实现方块图标可以通过使用伪类选择器和设置宽度、高度、背景颜色或边框样式来实现。使用方块图标可以增加页面的可读性和美观度，以便更好地传达信息。