图标

Jamdesk 内置 Font Awesome Pro：数千个免费与专业图标。

在组件中使用图标

大多数组件接受一个 icon 属性，其值为 Font Awesome 图标名称：

<Card title="Quickstart" icon="rocket" href="/quickstart">

  Learn how to set up your documentation site.

</Card>

图标可用于卡片、手风琴、标签页和导航项。

Icon 组件

使用 <Icon> 组件可以在文本中行内显示图标：

<Icon icon="check" color="green" /> Task completed

Task completed

Icon 属性

示例

<Icon icon="star" color="yellow" size={24} />
<Icon icon="circle-check" color="green" />
<Icon icon="triangle-exclamation" color="orange" />
<Icon icon="heart" color="#E91E63" size={20} />

查找图标

在 fontawesome.com/icons 浏览完整的图标库。搜索所需图标，然后在文档中使用其图标名称。

品牌图标

Jamdesk 会自动识别技术和公司标志：

<Icon icon="github" size={24} />
<Icon icon="discord" size={24} />
<Icon icon="react" size={24} />
<Icon icon="python" size={24} />

常见品牌图标包括：

图标变体

Font Awesome 图标提供多种样式变体，用于控制视觉粗细。在图标名称前添加前缀即可选择变体。

可用变体

Font Awesome 的 Sharp 系列同样可用，其特点是直角边角：sharp-solid/、sharp-regular/、sharp-light/、sharp-thin/ 和 sharp-duotone-solid/（例如 sharp-duotone-solid/star）。

示例

<Icon icon="solid/bell" size={24} />
<Icon icon="regular/bell" size={24} />
<Icon icon="light/bell" size={24} />
<Icon icon="thin/bell" size={24} />
<Icon icon="duotone/bell" size={24} />

在组件中使用变体

变体可用于所有使用图标的地方：组件、导航和前置元数据。

<Card title="Callouts" icon="light/bell" href="/components/callouts">

  Add important notices to your documentation.

</Card>

---
title: Settings
icon: light/gear
---

{
  "group": "Account",
  "icon": "regular/user",
  "pages": ["profile", "settings"]
}

图标对象形式

在 docs.json 中任何接受图标的位置（导航分组、标签页、锚点、页面图标以及搜索 popularPages），都可以将图标写成对象而非字符串。仪表板的图标选择器生成的就是这种形式：

{
  "group": "Security",
  "icon": { "name": "shield", "style": "duotone" }
}

{ "name": "shield", "style": "duotone" } 等同于字符串 "duotone/shield"。两者任选其一即可。前置元数据中的 icon（页面图标）仅支持字符串形式。

默认变体

图标默认以 Solid 变体渲染。可以通过样式前缀（light/gear）为单个图标覆盖默认值，或在 docs.json 中使用对象形式的 style 字段覆盖。

比较不同变体

同一图标在各变体下的效果：

导航图标

图标可以出现在侧边栏导航的三个层级：锚点、分组和单个页面。

页面图标

使用前置元数据为任意页面添加图标：

---
title: Authentication
icon: lock
---

图标会显示在侧边栏中页面标题旁边。

组图标

在 docs.json 中为导航分组添加图标：

{
  "group": "Security",
  "icon": "shield",
  "pages": ["authentication", "api-keys"]
}

锚点图标

在 docs.json 中为顶层锚点添加图标：

{
  "navigation": {
    "anchors": [
      {
        "anchor": "Docs",
        "icon": "book-open",
        "groups": [...]
      },
      {
        "anchor": "API",
        "icon": "code",
        "groups": [...]
      }
    ]
  }
}

免费版与 Pro 图标

Jamdesk 包含 Font Awesome Pro，这意味着：

• 可用图标超过 7,000 个（免费版约 2,000 个）
• 所有免费图标无需任何修改即可使用
• 包括双色变体在内的专业独占图标均已包含
• 提供 Light 和 Thin 粗细的图标

从使用 Font Awesome Free 的文档平台迁移后，这些图标依然可以正常工作。

下一步