今天我們來學習一下如何在CSS中使用簡單的代碼，讓圖標在被點擊時變色。這是在網頁設計中非常常見的一種交互效果，實現起來也非常簡單。 首先我們需要在HTML中插入一個圖標，例如一個箭頭。可以使用Font Awesome庫來獲取圖標，也可以自己設計一個SVG圖標。

<i class="fa fa-arrow-right"></i>

接著，在CSS中定義一個:hover偽類，表示當鼠標懸停在圖標上時應用的樣式。

i:hover {
color: red;
}

現在，當鼠標懸停在箭頭圖標上時，它的顏色將變為紅色。但是我們還需要讓它在被點擊時保持這種顏色，而不是只在懸停時應用。 為此，我們可以為圖標添加一個class，例如"active"。當圖標被點擊時，我們可以使用jQuery來動態地添加/刪除這個class。

$('i').click(function() {
$(this).toggleClass('active');
});

現在，我們已經成功地實現了一個簡單的圖標點擊變色效果。你可以嘗試在你的網頁上添加它，讓你的用戶獲得更好的體驗。