{ "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": { "downloadMode": "redirect", "downloadUrl": "/downloads/font-awesome", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=font-awesome", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "SKILL.md", "memory-template.md", "setup.md" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "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." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/font-awesome", "agentPageUrl": "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" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Setup", "body": "On first use, read setup.md silently and start naturally. Never mention setup files to the user." }, { "title": "When to Use", "body": "User needs icons in a web project. Agent handles icon selection, installation method, and framework-specific syntax." }, { "title": "Architecture", "body": "No persistent storage needed. Icon preferences tracked in user's main memory if requested." }, { "title": "Quick Reference", "body": "TopicFileSetup processsetup.mdMemory templatememory-template.md" }, { "title": "1. Determine Installation Method First", "body": "Ask or infer the project setup before suggesting icons:\n\nProject TypeRecommended MethodQuick prototype / CDN OKCDN Kitnpm/yarn project@fortawesome/fontawesome-freeReact/Vue/AngularFramework packageOffline / no external depsSVG sprites or individual SVGs" }, { "title": "2. Use Correct Syntax Per Method", "body": "CDN Kit (easiest):\n\n\n\n\nnpm (fontawesome-free):\n\nnpm install @fortawesome/fontawesome-free\n\nimport '@fortawesome/fontawesome-free/css/all.min.css';\n\n\n\nReact:\n\nnpm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faHouse } from '@fortawesome/free-solid-svg-icons';\n\n" }, { "title": "3. Know the Icon Styles", "body": "PrefixStyleAvailabilityfa-solid / fasSolidFreefa-regular / farRegular (outlined)Free (limited)fa-brands / fabBrand logosFreefa-light / falLightPro onlyfa-thin / fatThinPro onlyfa-duotone / fadDuotonePro only" }, { "title": "4. Icon Search Strategy", "body": "When user asks for an icon:\n\nSuggest semantic name first (e.g., fa-envelope for email)\nProvide 2-3 alternatives if ambiguous\nSpecify style availability (free vs pro)\n\nCommon mappings:\n\nConceptIconStyleHomefa-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" }, { "title": "5. Sizing and Styling", "body": "Size classes:\n\n \n \n \n \n \n\nFixed width (for alignment in lists):\n\n\n\nAnimation:\n\n\n\n\n\nRotation:\n\n\n\n" }, { "title": "6. Accessibility", "body": "Always provide accessible labels:\n\n\n\n\n\n\n\n\n" }, { "title": "7. Version Differences", "body": "v6 (current):\n\nUse fa-solid, fa-regular, fa-brands\nIcon names like fa-house, fa-magnifying-glass\n\nv5 (legacy):\n\nUse fas, far, fab\nSome icon names changed (e.g., fa-home → fa-house)\n\nIf working with existing v5 code, don't force upgrade unless asked." }, { "title": "Common Traps", "body": "Using Pro icons in free tier → icons don't render, no error\nWrong prefix (fa-solid vs fas) → depends on version, check project\nMissing CSS import with npm → icons show as squares\nUsing v5 names in v6 → some work, some don't (e.g., fa-home deprecated)\nNot setting aria-hidden on decorative icons → screen reader noise" }, { "title": "External Endpoints", "body": "EndpointData SentPurposekit.fontawesome.comKit ID onlyLoad icons via CDNcdn.fontawesome.netNoneAlternative CDN\n\nNo user data is sent. Icons loaded from public CDN." }, { "title": "Security & Privacy", "body": "Data that leaves your machine:\n\nHTTP request to Font Awesome CDN (if using CDN method)\n\nData that stays local:\n\nAll icon choices and code\n\nThis skill does NOT:\n\nTrack icon usage\nSend analytics\nRequire authentication for free tier" }, { "title": "Related Skills", "body": "Install with clawhub install if user confirms:\n\nreact — React development patterns\nhtml — HTML best practices\ncss — CSS styling patterns" }, { "title": "Feedback", "body": "If useful: clawhub star font-awesome\nStay updated: clawhub sync" } ], "body": "Setup\n\nOn first use, read setup.md silently and start naturally. Never mention setup files to the user.\n\nWhen to Use\n\nUser needs icons in a web project. Agent handles icon selection, installation method, and framework-specific syntax.\n\nArchitecture\n\nNo persistent storage needed. Icon preferences tracked in user's main memory if requested.\n\nQuick Reference\nTopic\tFile\nSetup process\tsetup.md\nMemory template\tmemory-template.md\nCore Rules\n1. Determine Installation Method First\n\nAsk or infer the project setup before suggesting icons:\n\nProject Type\tRecommended Method\nQuick prototype / CDN OK\tCDN Kit\nnpm/yarn project\t@fortawesome/fontawesome-free\nReact/Vue/Angular\tFramework package\nOffline / no external deps\tSVG sprites or individual SVGs\n2. Use Correct Syntax Per Method\n\nCDN Kit (easiest):\n\n\n\n\n\nnpm (fontawesome-free):\n\nnpm install @fortawesome/fontawesome-free\n\nimport '@fortawesome/fontawesome-free/css/all.min.css';\n\n\n\n\nReact:\n\nnpm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faHouse } from '@fortawesome/free-solid-svg-icons';\n\n\n\n3. Know the Icon Styles\nPrefix\tStyle\tAvailability\nfa-solid / fas\tSolid\tFree\nfa-regular / far\tRegular (outlined)\tFree (limited)\nfa-brands / fab\tBrand logos\tFree\nfa-light / fal\tLight\tPro only\nfa-thin / fat\tThin\tPro only\nfa-duotone / fad\tDuotone\tPro only\n4. Icon Search Strategy\n\nWhen user asks for an icon:\n\nSuggest semantic name first (e.g., fa-envelope for email)\nProvide 2-3 alternatives if ambiguous\nSpecify style availability (free vs pro)\n\nCommon mappings:\n\nConcept\tIcon\tStyle\nHome\tfa-house\tsolid, regular\nUser/Profile\tfa-user\tsolid, regular\nSettings\tfa-gear\tsolid\nSearch\tfa-magnifying-glass\tsolid\nMenu\tfa-bars\tsolid\nClose\tfa-xmark\tsolid\nEdit\tfa-pen\tsolid\nDelete\tfa-trash\tsolid\nSave\tfa-floppy-disk\tsolid, regular\nDownload\tfa-download\tsolid\nUpload\tfa-upload\tsolid\nEmail\tfa-envelope\tsolid, regular\nPhone\tfa-phone\tsolid\nLocation\tfa-location-dot\tsolid\nCalendar\tfa-calendar\tsolid, regular\nClock\tfa-clock\tsolid, regular\nCheck\tfa-check\tsolid\nWarning\tfa-triangle-exclamation\tsolid\nInfo\tfa-circle-info\tsolid\nError\tfa-circle-xmark\tsolid\nSuccess\tfa-circle-check\tsolid\nArrow right\tfa-arrow-right\tsolid\nChevron down\tfa-chevron-down\tsolid\nPlus\tfa-plus\tsolid\nMinus\tfa-minus\tsolid\nStar\tfa-star\tsolid, regular\nHeart\tfa-heart\tsolid, regular\nCart\tfa-cart-shopping\tsolid\nGitHub\tfa-github\tbrands\nTwitter/X\tfa-x-twitter\tbrands\nLinkedIn\tfa-linkedin\tbrands\nFacebook\tfa-facebook\tbrands\nInstagram\tfa-instagram\tbrands\nYouTube\tfa-youtube\tbrands\n5. Sizing and Styling\n\nSize classes:\n\n \n \n \n \n \n\n\nFixed width (for alignment in lists):\n\n\n\n\nAnimation:\n\n\n\n\n\n\nRotation:\n\n\n\n\n\n6. Accessibility\n\nAlways provide accessible labels:\n\n\n\n\n\n\n\n\n\n\n7. Version Differences\n\nv6 (current):\n\nUse fa-solid, fa-regular, fa-brands\nIcon names like fa-house, fa-magnifying-glass\n\nv5 (legacy):\n\nUse fas, far, fab\nSome icon names changed (e.g., fa-home → fa-house)\n\nIf working with existing v5 code, don't force upgrade unless asked.\n\nCommon Traps\nUsing Pro icons in free tier → icons don't render, no error\nWrong prefix (fa-solid vs fas) → depends on version, check project\nMissing CSS import with npm → icons show as squares\nUsing v5 names in v6 → some work, some don't (e.g., fa-home deprecated)\nNot setting aria-hidden on decorative icons → screen reader noise\nExternal Endpoints\nEndpoint\tData Sent\tPurpose\nkit.fontawesome.com\tKit ID only\tLoad icons via CDN\ncdn.fontawesome.net\tNone\tAlternative CDN\n\nNo user data is sent. Icons loaded from public CDN.\n\nSecurity & Privacy\n\nData that leaves your machine:\n\nHTTP request to Font Awesome CDN (if using CDN method)\n\nData that stays local:\n\nAll icon choices and code\n\nThis skill does NOT:\n\nTrack icon usage\nSend analytics\nRequire authentication for free tier\nRelated Skills\n\nInstall with clawhub install if user confirms:\n\nreact — React development patterns\nhtml — HTML best practices\ncss — CSS styling patterns\nFeedback\nIf useful: clawhub star font-awesome\nStay updated: clawhub sync" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/ivangdavila/font-awesome", "publisherUrl": "https://clawhub.ai/ivangdavila/font-awesome", "owner": "ivangdavila", "version": "1.0.0", "license": null, "verificationStatus": "Indexed source record" }, "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" } }