Bootstrap Glyphicons圖示查詢器

查找 Bootstrap 3 的 Glyphicons 字型圖示

這個查詢器適合維護舊版 Bootstrap 3 頁面的開發者：輸入圖示名稱、十六進位碼點片段，或目錄為圖示設定的英文／中文關鍵詞，即可篩選項目並查看預覽。結果提供完整類名、HTML 範例與 CSS 的 content 值，方便確認要貼進哪種程式碼位置。搜尋名稱例如 search，可找出 glyphicon glyphicon-search；輸入碼點片段 e003 也能找到對應項目。空白搜尋會顯示目前目錄的全部項目。

這裡的「碼點」是字元在 Unicode 中的數值識別；它本身不是圖檔，也不會攜帶字型。Bootstrap 3 將 Glyphicons 以字型及 CSS 類別呈現，Bootstrap 官方文件列出相應類名與使用方式。這與名稱相近的 Bootstrap Icons 專案不同：後者是另一套圖示庫，不能把其 SVG 圖檔或 bi-* 類名當成此處的查詢結果。

三種複製結果分別代表什麼

• 類名：例如 glyphicon glyphicon-search，指定要顯示的字形；頁面仍須載入相符的 Bootstrap 3 樣式與 Glyphicons 字型。
• HTML：例如 <span class="glyphicon glyphicon-search" aria-hidden="true"></span>，是可貼入標記的元素範例。若圖示承載操作意義，需另有可讀文字或輔助標籤。
• CSS：例如 content: "\e003";，提供偽元素規則中的內容值；它不會自動建立字型、字體家族或完整樣式。

Bootstrap 3 官方文件指出這套圖示以字型格式提供；官方遷移文件則記錄 Bootstrap 4 已移除 Glyphicons。若專案使用 Bootstrap 4 或 5，這些舊類名不會因為複製成功就能顯示。

從搜尋到貼入專案

1. 輸入名稱、關鍵詞或碼點片段

   在搜尋欄輸入英文名稱的一部分，例如 search；也可輸入已知含義的中英文關鍵詞，或碼點的十六進位部分，例如 e003。篩選不區分英文字母大小寫，並以部分文字比對名稱、碼點和條目關鍵詞。碼點欄不含 U+ 前綴，直接輸入十六進位片段即可。

2. 核對圖形與識別資訊

   比對預覽、圖示名稱及 U+ 開頭的碼點，避免只依賴語意相近的關鍵詞。輸入沒有匹配項時，縮短搜尋字串，改試常見英文名稱或碼點片段。

3. 選擇程式碼格式

   複製類名可套在元素上，HTML 可作為含類名的元素範本，CSS 則是偽元素用的 content 值。貼上後確認專案實際載入相符的字型及 CSS，並在目標畫面檢查顯示結果。

搜尋與顯示時的常見疑問

使用前確認版本與字型

• 此查詢範圍是目前目錄中的 Glyphicons 項目，不應推定涵蓋所有圖示變體或其他圖示庫。
• 圖示預覽需要載入 Bootstrap 3 字型樣式；外部樣式載入失敗時，預覽可能無法呈現。複製出的程式碼也不會打包字型資源。
• 類名及碼點是舊字型方案的識別資訊，不是可獨立使用的向量圖檔。若圖示代表按鈕或狀態含義，請同時提供文字或適當的輔助科技標籤，避免只靠圖形傳遞必要資訊。