# Send Font Awesome to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
## Suggested prompts
### New install

```text
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
```
### Upgrade existing

```text
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "font-awesome",
    "name": "Font Awesome",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/ivangdavila/font-awesome",
    "canonicalUrl": "https://clawhub.ai/ivangdavila/font-awesome",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/font-awesome",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=font-awesome",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md",
      "memory-template.md",
      "setup.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/font-awesome"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/font-awesome",
    "downloadUrl": "https://openagent3.xyz/downloads/font-awesome",
    "agentUrl": "https://openagent3.xyz/skills/font-awesome/agent",
    "manifestUrl": "https://openagent3.xyz/skills/font-awesome/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/font-awesome/agent.md"
  }
}
```
## Documentation

### 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

TopicFileSetup processsetup.mdMemory templatememory-template.md

### 1. Determine Installation Method First

Ask or infer the project setup before suggesting icons:

Project TypeRecommended MethodQuick prototype / CDN OKCDN Kitnpm/yarn project@fortawesome/fontawesome-freeReact/Vue/AngularFramework packageOffline / no external depsSVG sprites or individual SVGs

### 2. Use Correct Syntax Per Method

CDN Kit (easiest):

<script src="https://kit.fontawesome.com/YOUR_KIT_ID.js" crossorigin="anonymous"></script>
<i class="fa-solid fa-house"></i>

npm (fontawesome-free):

npm install @fortawesome/fontawesome-free

import '@fortawesome/fontawesome-free/css/all.min.css';

<i class="fa-solid fa-user"></i>

React:

npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHouse } from '@fortawesome/free-solid-svg-icons';

<FontAwesomeIcon icon={faHouse} />

### 3. Know the Icon Styles

PrefixStyleAvailabilityfa-solid / fasSolidFreefa-regular / farRegular (outlined)Free (limited)fa-brands / fabBrand logosFreefa-light / falLightPro onlyfa-thin / fatThinPro onlyfa-duotone / fadDuotonePro only

### 4. Icon Search Strategy

When user asks for an icon:

Suggest semantic name first (e.g., fa-envelope for email)
Provide 2-3 alternatives if ambiguous
Specify style availability (free vs pro)

Common mappings:

ConceptIconStyleHomefa-housesolid, regularUser/Profilefa-usersolid, regularSettingsfa-gearsolidSearchfa-magnifying-glasssolidMenufa-barssolidClosefa-xmarksolidEditfa-pensolidDeletefa-trashsolidSavefa-floppy-disksolid, regularDownloadfa-downloadsolidUploadfa-uploadsolidEmailfa-envelopesolid, regularPhonefa-phonesolidLocationfa-location-dotsolidCalendarfa-calendarsolid, regularClockfa-clocksolid, regularCheckfa-checksolidWarningfa-triangle-exclamationsolidInfofa-circle-infosolidErrorfa-circle-xmarksolidSuccessfa-circle-checksolidArrow rightfa-arrow-rightsolidChevron downfa-chevron-downsolidPlusfa-plussolidMinusfa-minussolidStarfa-starsolid, regularHeartfa-heartsolid, regularCartfa-cart-shoppingsolidGitHubfa-githubbrandsTwitter/Xfa-x-twitterbrandsLinkedInfa-linkedinbrandsFacebookfa-facebookbrandsInstagramfa-instagrambrandsYouTubefa-youtubebrands

### 5. Sizing and Styling

Size classes:

<i class="fa-solid fa-house fa-xs"></i>   <!-- 0.75em -->
<i class="fa-solid fa-house fa-sm"></i>   <!-- 0.875em -->
<i class="fa-solid fa-house fa-lg"></i>   <!-- 1.25em -->
<i class="fa-solid fa-house fa-xl"></i>   <!-- 1.5em -->
<i class="fa-solid fa-house fa-2xl"></i>  <!-- 2em -->

Fixed width (for alignment in lists):

<i class="fa-solid fa-house fa-fw"></i>

Animation:

<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid fa-heart fa-beat"></i>
<i class="fa-solid fa-bell fa-shake"></i>

Rotation:

<i class="fa-solid fa-arrow-right fa-rotate-90"></i>
<i class="fa-solid fa-arrow-right fa-rotate-180"></i>
<i class="fa-solid fa-arrow-right fa-flip-horizontal"></i>

### 6. Accessibility

Always provide accessible labels:

<!-- Decorative (hidden from screen readers) -->
<i class="fa-solid fa-house" aria-hidden="true"></i>

<!-- Meaningful (needs label) -->
<i class="fa-solid fa-trash" aria-label="Delete item"></i>

<!-- With visible text (icon is decorative) -->
<button>
  <i class="fa-solid fa-save" aria-hidden="true"></i>
  Save
</button>

### 7. Version Differences

v6 (current):

Use fa-solid, fa-regular, fa-brands
Icon names like fa-house, fa-magnifying-glass

v5 (legacy):

Use fas, far, fab
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

EndpointData SentPurposekit.fontawesome.comKit ID onlyLoad icons via CDNcdn.fontawesome.netNoneAlternative 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
html — HTML best practices
css — CSS styling patterns

### Feedback

If useful: clawhub star font-awesome
Stay updated: clawhub sync
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: ivangdavila
- Version: 1.0.0
## Source health
- Status: healthy
- Source download looks usable.
- Yavira can redirect you to the upstream package for this source.
- Health scope: source
- Reason: direct_download_ok
- Checked at: 2026-04-30T16:55:25.780Z
- Expires at: 2026-05-07T16:55:25.780Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/font-awesome)
- [Send to Agent page](https://openagent3.xyz/skills/font-awesome/agent)
- [JSON manifest](https://openagent3.xyz/skills/font-awesome/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/font-awesome/agent.md)
- [Download page](https://openagent3.xyz/downloads/font-awesome)