CSS中的icon是指小圖標，用來增加頁面的美觀性和可讀性。通常情況下，我們可以通過三種方式來使用icon。

第一種方式是使用圖像文件作為icon。這種方式比較簡單，只需要在HTML標簽中引用相應的圖像文件即可。例如：

第二種方式是使用字體文件作為icon。這種方式可以實現更多種類的icon，并且可以通過CSS來控制icon的顏色和大小。使用字體圖標需要先引入相應的字體文件，然后將icon的Unicode碼作為類名來顯示相應的icon。例如：

第三種方式是使用CSS繪制icon。這種方式可以實現更高度的自定義，但需要比較熟練的CSS技巧。通過CSS3的繪制特性，我們可以使用偽元素來創建icon。例如：

.icon-heart::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
transform: rotate(-45deg);
border-radius: 50%;
border: 3px solid #f00;
box-shadow: 0 0 0 3px #f00, 10px 0 0 3px #f00;
}
.icon-heart::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: 0;
right: 0;
transform: rotate(45deg);
border-radius: 50%;
border: 3px solid #f00;
box-shadow: 0 0 0 3px #f00, -10px 0 0 3px #f00;
}