← All skills

Tencent SkillHub · Developer Tools

Font Awesome

Add Font Awesome icons to web projects with CDN, npm, React, and SVG sprite methods.

skill openclawclawhub Free

0 Downloads

0 Stars

0 Installs

0 Score

High Signal

Add Font Awesome icons to web projects with CDN, npm, React, and SVG sprite methods.

⬇ 0 downloads ★ 0 stars Unverified but indexed

Install for OpenClaw

Quick setup

Download the package from Yavira.
Extract the archive and review SKILL.md first.
Import or place the package into your OpenClaw setup.

Requirements

Target platform: OpenClaw
Install method: Manual import
Extraction: Extract archive
Prerequisites: OpenClaw
Primary doc: SKILL.md

Package facts

Download mode: Yavira redirect
Package format: ZIP package
Source platform: Tencent SkillHub
What's included: SKILL.md, memory-template.md, setup.md

Validation

Use the Yavira download entry.
Review SKILL.md after the package is downloaded.
Confirm the extracted package contains the expected setup assets.

Install with your agent

Agent handoff

Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.

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.

New install

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

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.

Open Send to Agent page Open JSON manifest Open Markdown brief

Trust & source

Release facts

Source: Tencent SkillHub
Verification: Indexed source record
Version: 1.0.0

Provenance

Publisher: ivangdavila
Source page: View original listing
Canonical URL: Open canonical page

Documentation

ClawHub primary doc Primary doc: SKILL.md 16 sections Open source page

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> npm (fontawesome-free): npm install @fortawesome/fontawesome-free import '@fortawesome/fontawesome-free/css/all.min.css'; 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:      Fixed width (for alignment in lists): Animation: Rotation:

6. Accessibility

Always provide accessible labels:    <button> 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

Category context

Code helpers, APIs, CLIs, browser automation, testing, and developer operations.

Source: Tencent SkillHub

Largest current source with strong distribution and engagement signals.

Package contents

Included in package

3 Docs

SKILL.md Primary doc
memory-template.md Docs
setup.md Docs