CSS圖標是網頁開發中常用的元素之一。這些圖標通常用于元素的裝飾，比如按鈕，菜單，導航欄等，使網站更加美觀和易于使用。圖標的顏色填充也是圖標設計和開發中一個重要的屬性。下面我們將看到如何使用CSS來填充圖標顏色。

.icon {
width: 32px;
height: 32px;
background-image: url("path/to/icon.svg");
background-repeat: no-repeat;
background-size: 100%;
}

以上是基本的CSS代碼，它將一個svg圖標應用于元素的背景中。現在我們可以使用以下代碼來更改其顏色：

.icon {
background-color: red; //改變圖標顏色
-webkit-mask-image: url("path/to/icon.svg"); //將圖標作為遮罩層
mask-image: url("path/to/icon.svg"); //將圖標作為遮罩層
}

上面的代碼使用一個紅色的背景填充，并在遮罩層中應用了相同的圖標。這種方法支持我們在瀏覽器中使用任何顏色來填充我們的圖標，我們只需要將background-color更改為我們所需的顏色即可。

同時，我們也可以使用CSS的漸變屬性來填充圖標的顏色，如下：

.icon {
background-image: linear-gradient(to right, red, yellow); //使用線性漸變填充圖標顏色
-webkit-mask-image: url("path/to/icon.svg"); //將圖標作為遮罩層
mask-image: url("path/to/icon.svg"); //將圖標作為遮罩層
}

這里我們將為圖標應用從紅色到黃色的線性漸變。我們可以通過適當修改參數來創建各種不同的漸變效果。

綜上所述，使用CSS進行圖標顏色填充是非常簡單和靈活的，它為我們提供了在網站開發中實現自定義圖標顏色的方法。通過這種方法，我們可以創建許多新的美觀的圖標，使我們的網站更具吸引力。