FontAwesome圖示查詢器

工具教程

1. 在搜尋框中輸入圖示關鍵詞，例如“user”、“搜尋”、“心”等，工具自動展示匹配的圖示列表。
2. 瀏覽結果，找到目標圖示。結果中顯示圖示預覽、類名和Unicode編碼。
3. 點選“複製類名”或“複製Unicode”按鈕，即可將程式碼複製到剪貼簿，直接貼上到HTML或CSS檔案中使用。

示例輸入：關鍵詞“home”
輸出結果：類名 fas fa-home，Unicode f015，HTML示例

常見問題FAQ：

• 如何區分免費版（Free）和專業版（Pro）圖示？ 本工具預設展示免費圖示集，若需要Pro圖示可前往FontAwesome官網檢視授權。
• 複製後為何圖示不顯示？ 請確保頁面已引入FontAwesome CSS檔案（如CDN），並且類名格式正確。常見原因包括未引入樣式庫或類名拼寫錯誤。

注意事項

搜尋功能基於圖示名稱和別名，支援中英文關鍵詞，但輸入特殊字元可能無法匹配。本工具僅提供圖示程式碼，不包含樣式檔案引入服務，請自行在專案中載入FontAwesome資源。所有圖示資訊來源於FontAwesome公開資料，僅供學習與開發使用。

專業技術筆記 / 使用建議

建議在專案中透過類名方式引用圖示，以保持樣式統一和快取優勢。若需動態改變圖示，可透過JavaScript修改元素的className或設定innerHTML為對應的Unicode。對於需要相容舊瀏覽器的場景，可使用標籤配合CSS font-family 和偽元素，減少DOM節點。示例： 並定義 .icon { font-family: 'Font Awesome 5 Free'; font-weight: 900; }。