流程总览

1. 获取资源包 — 下载图标方案相关资源文件。
2. Agent 接入 — 让 Agent 把图标 CSS 挂进你的项目。
3. 打开列表选型 — 进入 图标列表，按风格 / 分类 / 粗细浏览。
4. 复制和使用 — 交给 Agent 写入，或手动粘贴 Class / HTML / SVG。

1. 获取资源包

本方案以本地资源包交付：Font Awesome Pro 字体与 CSS 文件，解压后放到你的工程或静态资源目录即可。

• 如果还没有资源包，可通过 获取方案 渠道咨询交付方式。
• 资源包解压后内部包含 css/ 与 webfonts/ 文件目录，建议存放到项目中的以下路径：vendor/fontawesome/v7/。
• 授权与商用范围以你所持有的 Font Awesome 许可为准；本站只提供浏览与复制体验。

2. 接入图标方案

方式一：用 Agent 接入

在 Agent 对话框里发送以下提示词，将本地资源挂到所在前端项目（不依赖外网 CDN，可用全部 Pro 风格）。

请为当前项目接入本地 Font Awesome Pro+ 图标方案。资源目录：vendor/fontawesome/v7/ (根据实际位置修改)

1. 在入口中引入 css/all.min.css，并保证同级 webfonts 可加载
2. 仅在用到锋利 / 双色时再补载 sharp-*.css、duotone-*.css
3. 放一个示例图标验证显示，如 <i class="fa-solid fa-check" aria-hidden="true"></i>
4. 简要说明改动了哪些文件

将项目图标方案改为 Font Awesome，默认 Classic + Solid，并为「xx组件」匹配符合语义的图标

将「xx元素」图标改为 Duotone + Solid

<link rel="stylesheet" href="vendor/fontawesome/v7/css/all.min.css" />

<link rel="stylesheet" href="…/css/sharp-solid.min.css" />
<link rel="stylesheet" href="…/css/duotone.min.css" />

3. 打开列表选型

如果想使用某个特定的图标，可以根据分类或搜索查询。

1. 打开 图标列表。
2. 左侧选择风格家族：默认 / 双色 / 锋利 / 品牌；再按分类筛选。
3. 顶部切换样式：粗体 / 常规 / 细体 / 极细（品牌风格无样式选项）。
4. 可用搜索框按英文名或中文标签定位图标。

4. 复制和使用

在列表点选图标后可以复制图标 Class，推荐交给 Agent 写入，也可以手动粘贴。

方式一：交给 Agent

• 复制 Class（或 HTML），在对话里说明要插入的页面 / 组件位置。
• 让 Agent 按当前技术栈写入标签。

请把这个图标加到「xx组件」：fa-solid fa-magnifying-glass
按当前技术栈写入, 改完指出位置并确认能显示。

方式二：手动粘贴

• 点击卡片复制 Class；详情里可复制 HTML，或导出 SVG。
• 粘贴到项目，例如 <i class="fa-solid fa-magnifying-glass"></i>，再用 CSS 控制颜色与尺寸。
• 复制历史保存在本机浏览器，可再次一键复制。
• 如果是使用 SVG 文件或代码，不需要依赖 Font Awesome 资源。

其它问题说明

请从 Font Awesome 官网下载 Free 包，并为当前项目接入 Font Awesome v7 Free 图标。接入后放一个示例图标验证显示。
官网下载：https://fontawesome.com/download