設計系統

深色模式

圖標 Icons ​

AccuHit 產品的圖標統一使用 Font Awesome 6,以 Solid 風格為主。

圖標查詢 ​

以下是本專案可用的 Font Awesome 6 免費版全部圖標(Solid 與 Regular)。切換上方分頁、輸入英文名稱或關鍵字即可搜尋;點任一圖標會複製它的 class(如 fa-solid fa-user),直接貼到 <i> 標籤即可使用。

共 1402 個 (只顯示前 600 個,請再用搜尋縮小範圍)· 點任一圖標即複製 class

用法

複製到的 class 直接放進 <i>:<i class="fa-solid fa-user"></i>。給設計師:圖標名稱(如 user)也可拿去 Font Awesome 官網看更大的預覽。

規則 ​

  1. Solid(fa-solid)為預設 —— 一般情境一律用 Solid
  2. Regular(fa-regular)允許使用,但僅限免費版圖標 —— 免費版 Regular 數量有限(約 160 個),典型用途是「未選中/空心」狀態(如收藏 ⭐、按讚 ❤️ 的 off 狀態,對應 Solid 的 on 狀態)。找圖標時務必篩選 Free,付費(Pro)圖標不可用
  3. 不使用 Light、Thin、Duotone,避免同一畫面出現粗細不一的圖標
  4. 例外:社群/品牌 logo(Facebook、LINE…)只存在於 Brands 風格(fa-brands),允許使用
  5. Element Plus 元件內建的圖標(輸入框的清除叉叉、下拉箭頭等)維持原樣,不強行替換
  6. 找圖標:到 Font Awesome 官網搜尋,篩選 Free

Solid vs Regular 的搭配 ​

Regular 主要拿來當 Solid 的「未啟用」狀態:

收藏 喜歡 書籤 通知

基本用法 ​

html
<i class="fa-solid fa-magnifying-glass"></i>

大小:跟著文字走 ​

圖標大小跟隨字體大小(不要另外設定寬高),與文字並排時自然對齊:

跟著 text-2xl(24px)
跟著 20px 標題
跟著 14px 內文

顏色:跟著文字色規則走 ​

圖標顏色遵守顏色使用順位,用文字色的映射 class:

text-main text-regular text-secondary text-primary text-danger

與文字搭配 ​

  • 圖標與文字的間距用 gap-1(4px)
  • 圖標在文字左側(操作類)或右側(方向類,如展開箭頭)
匯出報表展開更多

純圖標按鈕

只有圖標、沒有文字的按鈕,必須加上 aria-label 說明用途(無障礙需求), 且同一位置的圖標含義要全產品一致(例:垃圾桶=刪除,不拿來當「清空」)。

給工程師:安裝方式 ​

bash
pnpm add @fortawesome/fontawesome-free@^6
js
// main.js — 引入 solid + regular(與規則一致)
import '@fortawesome/fontawesome-free/css/fontawesome.css'
import '@fortawesome/fontawesome-free/css/solid.css'
import '@fortawesome/fontawesome-free/css/regular.css'
// 若該產品需要品牌 logo 圖標,再加:
// import '@fortawesome/fontawesome-free/css/brands.css'

版本注意

統一使用 Font Awesome 6(@^6),不要裝到 7 —— 兩版的圖標名稱與樣式有差異,混用會不一致。