HTML 插入 icon 代碼 在網站設計和開發過程中，icon 是一個非常重要的元素，可以用來增強網站的視覺和用戶體驗。在 HTML 中插入 icon，通常是通過使用字體圖標或 SVG 圖標實現的。 一、使用字體圖標 1. 在 HTML 文件中引入字體圖標庫。目前比較流行的字體圖標庫有 FontAwesome、Material Icons、Ionicons 等。在 head 標簽中加入以下代碼：

<link rel="stylesheet"  integrity="sha512-Tv87CIWsBYyJfC1+2EGNWqhgaY+TNXCeDxOZdXGmJjA31atBHcTTkCcNYy3qCugMlaTJzAaF6GLZ0gXNl1N/Zg==" crossorigin="anonymous" />

2. 在 HTML 代碼中插入 icon。使用相關的 HTML 標簽和類名來插入字體圖標。例如，在 p 標簽中插入 a 標簽的 Facebook icon，代碼如下：

<p><a href="#" class="fab fa-facebook-f"></a>Follow us on Facebook</p>

其中，“fab” 表示 Font Awesome 的品牌圖標，Facebook 的圖標類名為 `fa-facebook-f`。 二、使用 SVG 圖標 1. 導入 SVG 文件。可以在 SVG 網站上下載免費的 SVG 圖標，也可以使用在線 SVG 圖標庫，如 Ionicons、Feather Icons 等。將所需的 SVG 文件放入項目的資源目錄中。 2. 在 HTML 中插入 SVG 圖標。可以使用 img 標簽或內聯 SVG 標簽。例如，使用 img 標簽插入名為 “logo.svg” 的 SVG 文件，代碼如下：

<img src="/assets/logo.svg" alt="Logo" />

3. 在 CSS 中調整 SVG 圖標的樣式。可以使用 CSS 來修改 SVG 圖標的大小、顏色等屬性。 以上是插入 icon 的兩種常見方法，可以根據實際需求和技術情況來選擇使用哪種方法。無論使用哪種方法，都應該優化 icon 的加載速度，避免影響網站性能。