CSS圖標代碼怎么寫？下面讓我們來詳細了解一下。 首先，我們需要找到一個合適的圖標庫，常用的有Font Awesome、Material Icons等。我們以Font Awesome為例，打開官網可以看到每個圖標都有一個對應的class。 例如，想要使用一張GitHub Logo的圖標，我們可以在對應的class前加上 "fab"（表示該圖標屬于Font Awesome品牌圖標庫），再加上"githu"（表示這是該庫的GitHub Logo）。 代碼如下：

<i class="fab fa-github"></i>

接下來，我們可以通過CSS樣式對圖標進行修改。例如，修改圖標的大小、顏色等等。 代碼如下：

i { font-size: 24px; color: green; }

以上代碼將圖標的大小改為24像素，顏色改為綠色。 同時，我們也可以使用偽元素 ::before 和 ::after 添加一些額外的樣式，例如為圖標添加背景色和圓角，代碼如下：

i::before { content: ""; background-color: blue; border-radius: 50%; display: inline-block; width: 30px; height: 30px; margin-right: 10px; }

以上代碼將會在圖標前面添加一個藍色背景色，并設置邊框半徑為50%以呈現圓形，寬度和高度都設置為30像素。 最后，我們可以添加一些交互效果，例如:hover來改變圖標的樣式，代碼如下：

i:hover { color: red; }

以上代碼將會在鼠標懸浮在圖標上時將字體顏色變為紅色。 總結：使用CSS類名稱來顯示圖標，然后使用CSS樣式來修改并添加額外效果。如果你想要交互效果，也可以使用:hover來添加。希望這篇文章對你有所幫助！