---
title: 图标
description: Jamdesk 内置 Font Awesome Pro，可在卡片、提示框、侧边栏导航和行内文本中使用多种样式的图标。
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Jamdesk 内置 **Font Awesome Pro**：数千个免费和专业图标，随时可用。

## 在组件中使用图标

大多数组件都接受带有 Font Awesome 图标名称的 `icon` 属性：

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Learn how to set up your documentation site.
</Card>
```

<Card title="快速开始" icon="rocket" href="/cn/quickstart">
  了解如何设置文档站点。
</Card>

图标可用于 Card、Accordion、Tab 和导航项。

## Icon 组件

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

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

<Icon icon="check" color="green" /> 任务已完成

### Icon 属性

| 属性 | 类型 | 默认值 | 说明 |
|------|------|---------|-------------|
| `icon` | string | required | Font Awesome 图标名称 |
| `color` | string | - | 颜色名称（red、blue、green）或十六进制值（#FF5733） |
| `size` | number | 16 | 像素大小 |

### 示例

```mdx
<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} />
```

<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](https://fontawesome.com/icons) 浏览完整的图标库。搜索所需图标，然后在文档中使用其名称。

<Tip>
在 Font Awesome 网站上搜索时，请查看图标下方显示的图标名称（例如 “circle-check”、“arrow-right”）。在文档中使用完全一致的名称。
</Tip>

## 品牌图标

系统会自动识别技术和公司徽标，并正确渲染：

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

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

常见品牌图标包括：

| 类别 | 图标 |
|----------|-------|
| 社交 | github、discord、twitter、linkedin、youtube、slack |
| 编程语言 | python、react、vuejs、angular、node-js、php、java |
| 服务 | aws、docker、google、microsoft、stripe、shopify |

## 图标变体

Font Awesome 图标提供多种控制视觉粗细的样式变体。通过为图标名称添加前缀来指定变体。

### 可用变体

| 变体 | 前缀 | 示例 | 说明 |
|---------|--------|---------|-------------|
| 实心 | `solid/` | `solid/star` | 填充图标，粗细最大 |
| 常规 | `regular/` | `regular/star` | 轮廓图标，中等粗细 |
| 细 | `light/` | `light/star` | 更细的轮廓图标 |
| 极细 | `thin/` | `thin/star` | 最细的轮廓图标 |
| 双色 | `duotone/` | `duotone/star` | 采用分层颜色的双色图标 |

Font Awesome 还提供 **Sharp** 系列，其边角为方形：`sharp-solid/`、`sharp-regular/`、`sharp-light/`、`sharp-thin/` 和 `sharp-duotone-solid/`（例如 `sharp-duotone-solid/star`）。

### 示例

```mdx
<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} />
```

<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} />

### 在组件中使用变体

变体可用于图标出现的任何位置：组件、导航和 frontmatter。

```mdx
<Card title="Callouts" icon="light/bell" href="/components/callouts">
  Add important notices to your documentation.
</Card>
```

```yaml page.mdx
---
title: Settings
icon: light/gear
---
```

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

### 图标对象形式

在 `docs.json` 中，凡是接受图标的位置（导航组、标签页、锚点、页面图标和搜索 `popularPages`），都可以使用对象而不是字符串来表示图标。这是仪表板图标选择器生成的形式：

```json docs.json
{
  "group": "Security",
  "icon": { "name": "shield", "style": "duotone" }
}
```

| 字段 | 类型 | 说明 |
|-------|------|-------------|
| `name` | string | Font Awesome 图标名称（必填） |
| `style` | string | 上述变体之一：`solid`、`regular`、`light`、`thin`、`duotone` 或 `sharp-*` 变体 |
| `library` | string | `fontawesome` 或 `lucide`，为兼容性保留；图标通过 Font Awesome 渲染 |

`{ "name": "shield", "style": "duotone" }` 等同于字符串 `"duotone/shield"`。请选择你偏好的形式。Frontmatter 中的 `icon`（页面图标）仅支持字符串形式。

### 默认变体

未指定变体时，图标将以 **Solid** 变体渲染。你可以通过样式前缀（`light/gear`），或在 `docs.json` 中通过对象形式的 `style` 字段，为单个图标覆盖默认设置。

### 比较不同变体

以下展示了同一图标的所有变体，帮助你进行选择：

| 变体 | 图标 | 适用场景 |
|---------|------|----------|
| 实心 | <Icon icon="solid/folder" size={20} /> | 主要操作、强调 |
| 常规 | <Icon icon="regular/folder" size={20} /> | 次要界面元素 |
| 细 | <Icon icon="light/folder" size={20} /> | 极简设计、导航 |
| 极细 | <Icon icon="thin/folder" size={20} /> | 超极简风格 |
| 双色 | <Icon icon="duotone/folder" size={20} /> | 增强视觉效果、品牌展示 |

<Note>
双色图标使用两种颜色：主色和辅助色。辅助图层会自动设置为主色的较低不透明度。
</Note>

## 导航图标

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

### 页面图标

使用 frontmatter 为任意页面添加图标：

```yaml authentication.mdx
---
title: Authentication
icon: lock
---
```

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

### 组图标

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

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

### 锚点图标

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

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

## 免费版与 Pro 图标

Jamdesk 内置 Font Awesome Pro，这意味着：

- 提供 **7,000+ 个图标**（免费版约 2,000 个）
- 所有免费图标无需任何更改即可使用
- 包含双色变体等 Pro 专属图标
- 提供细和极细粗细的图标

如果你从使用 Font Awesome Free 的其他文档平台迁移，现有图标将继续正常工作。

## 下一步

<Columns cols={2}>
  <Card title="SEO 优化" icon="magnifying-glass-chart" href="/cn/content/seo">
    改善内容发现和元数据
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/cn/content/frontmatter">
    定义标题、描述和 SEO 字段
  </Card>
</Columns>