Setup
On first use, read setup.md silently and start naturally. Never mention setup files to the user.
When to Use
User needs icons in a web project. Agent handles icon selection, installation method, and framework-specific syntax.
Architecture
No persistent storage needed. Icon preferences tracked in user's main memory if requested.
Quick Reference
| Topic | File |
|---|
| Setup process | INLINECODE1 |
| Memory template |
memory-template.md |
Core Rules
1. Determine Installation Method First
Ask or infer the project setup before suggesting icons:
| Project Type | Recommended Method |
|---|
| Quick prototype / CDN OK | CDN Kit |
| npm/yarn project |
@fortawesome/fontawesome-free |
| React/Vue/Angular | Framework package |
| Offline / no external deps | SVG sprites or individual SVGs |
2. Use Correct Syntax Per Method
CDN Kit (easiest):
CODEBLOCK0
npm (fontawesome-free):
npm install @fortawesome/fontawesome-free
import '@fortawesome/fontawesome-free/css/all.min.css';
CODEBLOCK3
React:
npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
CODEBLOCK5
3. Know the Icon Styles
| Prefix | Style | Availability |
|---|
| INLINECODE4 / INLINECODE5 | Solid | Free |
| INLINECODE6 / INLINECODE7 |
Regular (outlined) | Free (limited) |
|
fa-brands /
fab | Brand logos | Free |
|
fa-light /
fal | Light | Pro only |
|
fa-thin /
fat | Thin | Pro only |
|
fa-duotone /
fad | Duotone | Pro only |
4. Icon Search Strategy
When user asks for an icon:
- 1. Suggest semantic name first (e.g.,
fa-envelope for email) - Provide 2-3 alternatives if ambiguous
- Specify style availability (free vs pro)
Common mappings:
| Concept | Icon | Style |
|---|
| Home | INLINECODE17 | solid, regular |
| User/Profile |
fa-user | solid, regular |
| Settings |
fa-gear | solid |
| Search |
fa-magnifying-glass | solid |
| Menu |
fa-bars | solid |
| Close |
fa-xmark | solid |
| Edit |
fa-pen | solid |
| Delete |
fa-trash | solid |
| Save |
fa-floppy-disk | solid, regular |
| Download |
fa-download | solid |
| Upload |
fa-upload | solid |
| Email |
fa-envelope | solid, regular |
| Phone |
fa-phone | solid |
| Location |
fa-location-dot | solid |
| Calendar |
fa-calendar | solid, regular |
| Clock |
fa-clock | solid, regular |
| Check |
fa-check | solid |
| Warning |
fa-triangle-exclamation | solid |
| Info |
fa-circle-info | solid |
| Error |
fa-circle-xmark | solid |
| Success |
fa-circle-check | solid |
| Arrow right |
fa-arrow-right | solid |
| Chevron down |
fa-chevron-down | solid |
| Plus |
fa-plus | solid |
| Minus |
fa-minus | solid |
| Star |
fa-star | solid, regular |
| Heart |
fa-heart | solid, regular |
| Cart |
fa-cart-shopping | solid |
| GitHub |
fa-github | brands |
| Twitter/X |
fa-x-twitter | brands |
| LinkedIn |
fa-linkedin | brands |
| Facebook |
fa-facebook | brands |
| Instagram |
fa-instagram | brands |
| YouTube |
fa-youtube | brands |
5. Sizing and Styling
Size classes:
CODEBLOCK6
Fixed width (for alignment in lists):
CODEBLOCK7
Animation:
CODEBLOCK8
Rotation:
CODEBLOCK9
6. Accessibility
Always provide accessible labels:
CODEBLOCK10
7. Version Differences
v6 (current):
- - Use
fa-solid, fa-regular, INLINECODE53 - Icon names like
fa-house, INLINECODE55
v5 (legacy):
- - Use
fas, far, INLINECODE58 - Some icon names changed (e.g.,
fa-home → fa-house)
If working with existing v5 code, don't force upgrade unless asked.
Common Traps
- - Using Pro icons in free tier → icons don't render, no error
- Wrong prefix (
fa-solid vs fas) → depends on version, check project - Missing CSS import with npm → icons show as squares
- Using v5 names in v6 → some work, some don't (e.g.,
fa-home deprecated) - Not setting
aria-hidden on decorative icons → screen reader noise
External Endpoints
| Endpoint | Data Sent | Purpose |
|---|
| kit.fontawesome.com | Kit ID only | Load icons via CDN |
| cdn.fontawesome.net |
None | Alternative CDN |
No user data is sent. Icons loaded from public CDN.
Security & Privacy
Data that leaves your machine:
- - HTTP request to Font Awesome CDN (if using CDN method)
Data that stays local:
- - All icon choices and code
This skill does NOT:
- - Track icon usage
- Send analytics
- Require authentication for free tier
Related Skills
Install with
clawhub install <slug> if user confirms:
- -
react — React development patterns - INLINECODE67 — HTML best practices
- INLINECODE68 — CSS styling patterns
Feedback
- - If useful: INLINECODE69
- Stay updated: INLINECODE70
设置
首次使用时，请静默阅读setup.md并自然开始。切勿向用户提及设置文件。
使用时机
用户需要在网页项目中使用图标。代理负责图标选择、安装方法及特定框架的语法处理。
架构
无需持久化存储。若用户要求，可在其主内存中记录图标偏好。
快速参考
memory-template.md |
核心规则
1. 先确定安装方法
在推荐图标前，询问或推断项目配置：
| 项目类型 | 推荐方法 |
|---|
| 快速原型 / 可使用CDN | CDN套件 |
| npm/yarn项目 |
@fortawesome/fontawesome-free |
| React/Vue/Angular | 框架包 |
| 离线 / 无外部依赖 | SVG精灵或独立SVG |
2. 按方法使用正确语法
CDN套件（最简单）：
html
npm（fontawesome-free）：
bash
npm install @fortawesome/fontawesome-free
javascript
import @fortawesome/fontawesome-free/css/all.min.css;
html
React：
bash
npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
jsx
import { FontAwesomeIcon } from @fortawesome/react-fontawesome;
import { faHouse } from @fortawesome/free-solid-svg-icons;
3. 了解图标样式
| 前缀 | 样式 | 可用性 |
|---|
| fa-solid / fas | 实心 | 免费 |
| fa-regular / far |
常规（轮廓） | 免费（有限） |
| fa-brands / fab | 品牌标志 | 免费 |
| fa-light / fal | 细体 | 仅Pro版 |
| fa-thin / fat | 极细 | 仅Pro版 |
| fa-duotone / fad | 双色调 | 仅Pro版 |
4. 图标搜索策略
当用户请求图标时：
- 1. 先建议语义化名称（如fa-envelope表示邮件）
- 若含义模糊，提供2-3个备选
- 说明样式可用性（免费版 vs Pro版）
常见映射：
| 概念 | 图标 | 样式 |
|---|
| 首页 | fa-house | 实心、常规 |
| 用户/个人资料 |
fa-user | 实心、常规 |
| 设置 | fa-gear | 实心 |
| 搜索 | fa-magnifying-glass | 实心 |
| 菜单 | fa-bars | 实心 |
| 关闭 | fa-xmark | 实心 |
| 编辑 | fa-pen | 实心 |
| 删除 | fa-trash | 实心 |
| 保存 | fa-floppy-disk | 实心、常规 |
| 下载 | fa-download | 实心 |
| 上传 | fa-upload | 实心 |
| 邮件 | fa-envelope | 实心、常规 |
| 电话 | fa-phone | 实心 |
| 位置 | fa-location-dot | 实心 |
| 日历 | fa-calendar | 实心、常规 |
| 时钟 | fa-clock | 实心、常规 |
| 勾选 | fa-check | 实心 |
| 警告 | fa-triangle-exclamation | 实心 |
| 信息 | fa-circle-info | 实心 |
| 错误 | fa-circle-xmark | 实心 |
| 成功 | fa-circle-check | 实心 |
| 右箭头 | fa-arrow-right | 实心 |
| 下箭头 | fa-chevron-down | 实心 |
| 加号 | fa-plus | 实心 |
| 减号 | fa-minus | 实心 |
| 星标 | fa-star | 实心、常规 |
| 心形 | fa-heart | 实心、常规 |
| 购物车 | fa-cart-shopping | 实心 |
| GitHub | fa-github | 品牌 |
| Twitter/X | fa-x-twitter | 品牌 |
| LinkedIn | fa-linkedin | 品牌 |
| Facebook | fa-facebook | 品牌 |
| Instagram | fa-instagram | 品牌 |
| YouTube | fa-youtube | 品牌 |
5. 尺寸与样式
尺寸类：
html
固定宽度（用于列表对齐）：
html
动画：
html
旋转：
html
6. 无障碍访问
始终提供无障碍标签：
html
7. 版本差异
v6（当前版本）：
- - 使用fa-solid、fa-regular、fa-brands
- 图标名称如fa-house、fa-magnifying-glass
v5（旧版）：
- - 使用fas、far、fab
- 部分图标名称已更改（如fa-home → fa-house）
若处理现有v5代码，除非用户要求，否则不要强制升级。
常见陷阱
- - 在免费版中使用Pro图标 → 图标不渲染，无错误提示
- 前缀错误（fa-solid vs fas）→ 取决于版本，需检查项目
- 使用npm时缺少CSS导入 → 图标显示为方块
- 在v6中使用v5名称 → 部分可用，部分不可用（如fa-home已弃用）
- 装饰性图标未设置aria-hidden → 屏幕阅读器产生噪音
外部端点
| 端点 | 发送数据 | 用途 |
|---|
| kit.fontawesome.com | 仅套件ID | 通过CDN加载图标 |
| cdn.fontawesome.net |
无 | 备用CDN |
不发送用户数据。图标从公共CDN加载。
安全与隐私
离开本机的数据：
- - 向Font Awesome CDN发送的HTTP请求（若使用CDN方式）
保留在本地的数据：
本技能不会：
- - 追踪图标使用情况
- 发送分析数据
- 要求免费版用户进行身份验证
相关技能
若用户确认，使用clawhub install 安装：
- - react — React开发模式
- html — HTML最佳实践
- css — CSS样式模式
反馈
- - 如有帮助：clawhub star font-awesome
- 保持更新：clawhub sync
