在CSS中，我們可以使用一個簡單的技巧來實現(xiàn)圖標點擊后變色的效果，這個技巧涉及到CSS的偽類選擇器，特別是:active偽類，下面是一個簡單的示例，展示了如何實現(xiàn)這個功能：

我們需要一個圖標，可以是一個字體圖標、圖片或者SVG，這里我們假設(shè)圖標是一個字體圖標，使用了一個常見的字體圖標庫，比如Font Awesome。

HTML結(jié)構(gòu)如下：

<i class="fa fa-check-circle" id="my-icon"></i>

我們使用CSS來定義圖標的樣式，特別是點擊時的樣式：

#my-icon {
  color: #007bff; /* 初始顏色 */
  transition: color 0.3s ease; /* 過渡效果 */
}
#my-icon:active {
  color: #dc3545; /* 點擊時的顏色 */
}

在這個示例中，#my-icon是圖標的ID，我們?yōu)樗x了兩個樣式，初始時，圖標顏色為#007bff（深藍色），當圖標被點擊時，顏色會變?yōu)?code>#dc3545（紅色），這是通過:active偽類實現(xiàn)的，我們還添加了一個顏色過渡效果，使得顏色變化更加平滑。

這樣，每次點擊圖標時，它都會從深藍色變?yōu)榧t色，實現(xiàn)了一個簡單的點擊變色效果，這種方法不僅適用于字體圖標，也適用于圖片和SVG圖標。