開發Web頁面時，經常需要使用圖標，以增強頁面的視覺效果。而在HTML中使用圖標，通常有兩種方式：圖片和矢量圖標。

在使用圖片時，一般會直接引入圖片文件，但是這樣會增加網絡傳輸的負擔，也不方便在頁面中調整圖標的顏色。而使用矢量圖標可以有效地避免這個問題，因為矢量圖標本身是由路徑和樣式構成的，路徑規定了圖標的形狀，而樣式則包含了圖標的顏色和其他外觀屬性。

<i class="icon-heart"></i>
.icon-heart {
color: red;
font-size: 24px;
}

以上是一個簡單的例子，使用了FontAwesome圖標庫中的心形圖標，并設置了它的顏色為紅色，大小為24像素。

在設置圖標顏色時，可以使用CSS屬性color，它可以接受各種顏色值、關鍵字或顏色變量。如果需要使用外部樣式表，可以將樣式定義在CSS文件中，并使用link元素或style元素引入。

i.icon-home {
color: var(--primary-color);
}
i.icon-note {
color: #007bff;
}

在上面的例子中，我們使用了CSS變量來定義主要顏色，并將其應用于首頁圖標，而筆記圖標的顏色則是固定的藍色。

總之，使用矢量圖標可以為Web開發提供更多的設計靈活性和方便性，而合理地設置顏色可以讓頁面更加生動、美觀。