在網頁中，圖標是必不可少的元素之一。而控制圖標顏色，常常使用CSS。那么，怎樣在 CSS 中控制圖標顏色呢？下面，就來詳細介紹一下。

首先，在網頁中使用圖標時，一般會引入字體文件（比如 Font Awesome）或者 SVG 矢量圖標。這些圖標在 CSS 中都是用偽元素 before 或 after 所表示的。

.icon:before {
font-family: FontAwesome;
content: '\f005';
}

上述代碼就是在使用 Font Awesome 圖標時所表示的一段 CSS。在 content 屬性中，我們設置圖標的 Unicode 編碼，而 font-family 屬性則指定了使用的 Font Awesome 字體。在這個例子中，\f005 就是表示一個星號的 Unicode 編碼。

要在 CSS 中控制圖標的顏色，只需要在相應的 class 或者偽元素中加入 color 屬性即可：

.icon:before {
font-family: FontAwesome;
content: '\f005';
color: red;
}

上述代碼中，使用了一個紅色星號，其他 Font Awesome 圖標的顏色也可以用同樣的方式進行設置。SVG 矢量圖標的話，也是同樣可以用 CSS 控制其顏色的，只需要在矢量圖標中加入 fill 屬性即可：

<svg class="icon">
<use xlink:href="#icon-demo"></use>
</svg>
.icon use {
fill: red;
}

上述代碼顯示了一個 SVG 矢量圖標的例子。在 class 為 icon 的元素內，引用了一個 id 為 icon-demo 的 SVG 矢量圖標。其中，使用了一個 use 標簽來引用 SVG 矢量圖標，use 標簽中的 xlink:href 屬性指向了 SVG 圖標的 id。而在 CSS 中，對于 use 標簽，可以使用 fill 屬性來設置其顏色。

綜上所述，CSS 控制圖標顏色還是比較簡單的。只需要在相應的 class 或者偽元素中加入 color 屬性，或者在矢量圖標中加入 fill 屬性即可。如果想要控制多個不同顏色的圖標，可以在不同的 class 中設置不同的顏色屬性。