在代碼中修改圖標樣式還有其他方法嗎？寫代碼示例，並解釋代碼意思

除了直接修改CSS樣式，在代碼中修改圖標樣式還有其他方法，例如使用偽類或使用CSS變量。以下是兩個示例：

1. 使用偽類：

示例代碼：

.icon:hover {
  color: red;   /* 滑鼠懸停時改變圖標顏色 */
  background-color: yellow; /* 滑鼠懸停時改變圖標背景色 */
}

解釋：上述代碼使用了偽類 `:hover`，當滑鼠懸停在圖標上時，會改變圖標的顏色和背景色。可以根據需要添加更多的樣式屬性來定制懸停效果。

2. 使用CSS變量：

示例代碼：

:root {
  --icon-color: blue;   /* 定義圖標顏色變量 */
  --icon-bg-color: green; /* 定義圖標背景色變量 */
}

.icon {
  color: var(--icon-color);   /* 使用圖標顏色變量 */
  background-color: var(--icon-bg-color); /* 使用圖標背景色變量 */
}

解釋：上述代碼使用了CSS變量，首先在 `:root` 偽類中定義了兩個變量 `--icon-color` 和 `--icon-bg-color`，然後在 `.icon` 類中使用這些變量來設置圖標的顏色和背景色。這種方法可以方便地在多個地方重用相同的樣式，並且更容易進行全局修改。