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

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

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

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

要在 CSS 中控制圖標(biāo)的顏色，只需要在相應(yīng)的 class 或者偽元素中加入 color 屬性即可：

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

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

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

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

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