圖標是網頁設計中必不可少的元素之一，而CSS可以方便地創建所有種類的圖標，無論是實心還是線條，無論是大小還是顏色，只需簡單地幾行代碼即可輕松實現。

// 實心圖標
.icon {
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
}
// 線條圖標
.icon {
width: 20px;
height: 20px;
border: 2px solid #000;
border-radius: 50%;
}
// 字體圖標
.icon {
font-family: "FontAwesome";
font-size: 20px;
}
// 多彩圖標
.icon {
width: 20px;
height: 20px;
background: linear-gradient(to bottom right, red, blue);
mask: url("icon.svg") no-repeat center center / contain;
}

以上代碼中，第一個實心圖標使用純CSS的方式，通過設置寬度、高度、背景顏色和邊框半徑等屬性來實現。第二個線條圖標也是類似的方式，只是將背景顏色換成了邊框屬性。

第三個字體圖標使用了外部字體庫的方式，可以在線下載FontAwesome等字體庫，然后引用即可。最后一個多彩圖標則是使用了CSS的漸變和mask屬性來實現的，mask屬性是CSS3新增的屬性，可以將一個元素指定為遮罩，然后使用SVG圖像來定義這個遮罩的形狀。

總之，CSS可以用很多種方式來創建圖標，只需要根據實際需求選擇合適的方式即可。