# fontawesome

Правило задаёт стандарты подключения Font Awesome 7, выбора стилей и размеров иконок и настройки Kit. Помогает поддерживать единый вид интерфейса и избегать ошибок при загрузке.

- правило · `type=rule` · Cursor · ★ 3580
- Автор: sanjeed5
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/fontawesome.mdc
- Обновлён: 2026-05-19
- HTML: https://affpapa.org/nevibecode/rules/fontawesome

## Что делает

Правило описывает работу с Font Awesome 7 в веб-интерфейсе. Оно рекомендует подключать Kit через скрипт в `head`, использовать тег `i` с явным префиксом стиля, а размер иконок задавать классами вроде `fa-lg` или `fa-5x`. Для собственных значков предусмотрена загрузка SVG в Kit с префиксом `fa-kit`.

Отдельные рекомендации касаются размера загружаемых ресурсов: в настройках Kit следует оставлять только используемые стили и категории иконок. Самостоятельный хостинг рассматривается как вариант для проектов с особыми требованиями к производительности и обслуживанию ресурсов. Для большинства проектов правило рекомендует подключение через Kit.

При загрузке собственных SVG важны корректный `viewBox`, явные `width` и `height`, а также подходящая структура `path`. Если значки отображаются пустыми или квадратами, нужно проверить расположение скрипта Kit и ошибки загрузки в консоли браузера. Опечатка в классе иконки тоже приводит к проблемам с отображением.

## Установка

### Cursor (родная платформа)

**Вручную: положить файлы**
- Файл: `.cursor/rules/fontawesome.mdc` — Во frontmatter: description, globs, alwaysApply

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/rules/fontawesome.md` — Поле paths во frontmatter ограничивает файлы: globs из источника → paths

### Codex

**AGENTS.md**
- Codex читает AGENTS.md: вставьте текст правила туда

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/instructions/fontawesome.instructions.md` — Поле applyTo задаёт, к каким файлам применять: globs из источника → applyTo

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/rules/fontawesome.md`

### Cline

**Вручную: положить файлы**
- Файл: `.clinerules/fontawesome.md`

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/fontawesome.mdc

## Когда брать
- Подключить Font Awesome Kit в `head` страницы
- Выбрать явный стиль для каждой иконки
- Настроить размер значков через классы Font Awesome
- Сократить загрузку ненужных наборов иконок в Kit
- Проверить SVG и исправить ошибки отображения значков

## Примеры запросов агенту
- Проверь подключение Font Awesome 7 и перенеси скрипт Kit в `head`, если он стоит неправильно.
- Исправь классы иконок в интерфейсе и задай явные стили и размеры Font Awesome.
- Проверь собственные SVG для Kit на корректность `viewBox`, `width`, `height` и структуры `path`.

## Похожие
- [better-icons](https://affpapa.org/nevibecode/skills/better-icons.md) — скилл · 5900 установок
- [icon-set-generator](https://affpapa.org/nevibecode/skills/icon-set-generator.md) — скилл · 1900 установок
- [morphing-icons](https://affpapa.org/nevibecode/skills/morphing-icons.md) — скилл · 362 установки
- [Iconoteka](https://affpapa.org/nevibecode/mcp/iconoteka.md) — MCP-сервер · ★ 13
- [Svg/icons MCP](https://affpapa.org/nevibecode/mcp/svgicons-mcp.md) — MCP-сервер
- [setup-fa](https://affpapa.org/nevibecode/skills/setup-fa.md) — скилл · 503 установки

Из того же набора: [sanjeed5/awesome-cursor-rules-mdc](https://affpapa.org/nevibecode/by/sanjeed5/awesome-cursor-rules-mdc.md) — 240 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md