图标
Jamdesk 内置 Font Awesome Pro，可在卡片、提示框、侧边栏导航和行内文本中使用多种样式的图标。
Jamdesk 内置 Font Awesome Pro：数千个免费和专业图标，随时可用。
在组件中使用图标
大多数组件都接受带有 Font Awesome 图标名称的 icon 属性：
<Card title="Quickstart" icon="rocket" href="/quickstart">
Learn how to set up your documentation site.
</Card>图标可用于 Card、Accordion、Tab 和导航项。
Icon 组件
使用 <Icon> 组件在文本中行内显示图标：
<Icon icon="check" color="green" /> Task completed任务已完成
Icon 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
icon | string | required | Font Awesome 图标名称 |
color | string | - | 颜色名称（red、blue、green）或十六进制值（#FF5733） |
size | number | 16 | 像素大小 |
示例
<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 浏览完整的图标库。搜索所需图标，然后在文档中使用其名称。
在 Font Awesome 网站上搜索时，请查看图标下方显示的图标名称（例如 “circle-check”、“arrow-right”）。在文档中使用完全一致的名称。
品牌图标
系统会自动识别技术和公司徽标，并正确渲染：
<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）。
示例
<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。
<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 | 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 字段，为单个图标覆盖默认设置。
比较不同变体
以下展示了同一图标的所有变体，帮助你进行选择：
| 变体 | 图标 | 适用场景 |
|---|---|---|
| 实心 | 主要操作、强调 | |
| 常规 | 次要界面元素 | |
| 细 | 极简设计、导航 | |
| 极细 | 超极简风格 | |
| 双色 | 增强视觉效果、品牌展示 |
双色图标使用两种颜色：主色和辅助色。辅助图层会自动设置为主色的较低不透明度。
导航图标
图标可以出现在侧边栏导航的三个层级：锚点、组和单个页面。
页面图标
使用 frontmatter 为任意页面添加图标：
---
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 个）
- 所有免费图标无需任何更改即可使用
- 包含双色变体等 Pro 专属图标
- 提供细和极细粗细的图标
如果你从使用 Font Awesome Free 的其他文档平台迁移，现有图标将继续正常工作。