# setup-fa

Configures Font Awesome from scratch: detects your framework, sets up a Kit or packages, and creates .font-awesome.md for icon workflows.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 503 installs · ★ 4
- Author: FortAwesome
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/FortAwesome/fontawesome-agent-tools/tree/HEAD/plugins/icons/skills/setup-fa/SKILL.md
- Updated: 2026-07-02
- HTML: https://affpapa.org/en/nevibecode/skills/setup-fa

## What it does

The skill inspects the repository using an exploration subagent. It identifies the package manager, checks for frameworks like React or Vue, and maps out any icon classes already in the codebase. Setup prioritizes an official Font Awesome Kit over manual setups. The agent requests confirmation first, before writing configuration files or installing dependencies.

Kit features require the `fa` command-line tool at version 0.8.0 or newer. When the CLI is not found on `PATH`, the skill falls back to internal Python scripts. Raw SVG generation is prohibited. The skill pulls official markup through the API instead of guessing paths from memory. Without `fa login` or a valid `FA_API_TOKEN`, kit setup will fail.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/setup-fa/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/setup-fa/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/setup-fa/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/setup-fa/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install FortAwesome/fontawesome-agent-tools setup-fa
```

2. **Manually: put the files in place**
- File: `.github/skills/setup-fa/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/FortAwesome/fontawesome-agent-tools --path plugins/icons/skills/setup-fa
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/setup-fa/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add FortAwesome/fontawesome-agent-tools --skill setup-fa -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/FortAwesome/fontawesome-agent-tools/tree/HEAD/plugins/icons/skills/setup-fa/SKILL.md

## When to use it
- configure Font Awesome in a React or Vue project
- switch from unofficial CDNs to an official Font Awesome Kit
- generate the `.font-awesome.md` file required by `/add-icon`
- audit the repository for previously imported icon families and styles

## Example prompts
- Set up Font Awesome in this project using Kit
- Configure Font Awesome packages for our Vue application
- Set up Font Awesome from scratch with method auto

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [fortawesome/fontawesome-agent-tools](https://affpapa.org/en/nevibecode/by/fortawesome/fontawesome-agent-tools.md) — 4 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md