Как подключить Font Awesome к сайту: CDN, npm, Kit и свои файлы

Font Awesome — библиотека иконок для сайтов: значки рисуются шрифтом или SVG, поэтому их можно красить и масштабировать обычным CSS. Чтобы подключить её за минуту, вставьте в <head> одну строку со ссылкой на CDN, а в нужном месте страницы напишите <i class="fa-solid fa-house"></i>. Ниже четыре способа подключения, поиск иконки на сайте, размер и цвет, доступность и разбор ошибок, из-за которых вместо значка появляется пустой квадрат.

Если вы только знакомитесь с вёрсткой, сначала прочитайте, что такое CSS и как подключить CSS к HTML: Font Awesome подключается тем же тегом <link>.

CheckroiПодборка курсов по CSS181 курс • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Что такое Font Awesome и что есть в бесплатной версии

Это набор иконок плюс CSS, который превращает класс у тега в картинку. Актуальная версия на ноябрь 2026 года 7.3.1: так она значится в пакете npm и на cdnjs.

Библиотека делится на Free и Pro. В бесплатную сборку входят три стиля, остальные открываются по подписке.

Таблица стилей и файлов собрана по документации Font Awesome о самостоятельном размещении, там же перечислены пакеты стилей Pro+.

Лицензия бесплатной версии разрешает коммерческие проекты. По файлу LICENSE.txt в пакете Font Awesome Free 7.3.1 иконки в SVG и JS идут под CC BY 4.0, шрифты под SIL OFL 1.1, а код под MIT. Как читать такие лицензии на практике, мы разбирали в статье о бесплатных шрифтах для коммерческого использования.

Как подключить Font Awesome: 4 способа

Выбор зависит от проекта. Для учебной страницы хватит CDN. Для сайта с трафиком файлы лучше хранить у себя или собирать через npm: тогда иконки не зависят от чужого сервера и лимитов аккаунта.

Через CDN

1. Откройте HTML-файл страницы. Если файла ещё нет, вот как создать index.html и открыть его в браузере.
2. Вставьте в <head> ссылку на стили с cdnjs.
3. Добавьте иконку в <body> и обновите страницу.

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css"
      integrity="sha512-QeR2VH+lsBE5LSAe1Q5EnTBbe7XTBubt8dG93Y7gidSgdMCr8nVqKcfKAMyN96SV8KDbZVTDXChatu5G2KQGzg=="
      crossorigin="anonymous" referrerpolicy="no-referrer">

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

Атрибут integrity хранит хеш файла. Если хеш загруженного с CDN файла не совпадёт с ним, браузер откажется его загружать, так описывает механизм справка MDN о Subresource Integrity. Хеш выше взят с cdnjs для версии 7.3.1. При смене версии берите новый хеш там же.

Через Kit с сайта Font Awesome

Kit называют вашу личную сборку на серверах Font Awesome. После регистрации вы получаете строку вида:

<script src="https://kit.fontawesome.com/ВАШ_КОД.js" crossorigin="anonymous"></script>

В справке по Kit сказано, что бесплатный Kit содержит все Free-иконки, а у бесплатных аккаунтов тоже есть лимит просмотров страниц. Для сайта с заметным трафиком это аргумент в пользу CDN или своих файлов.

Скачать и разместить у себя

• Скачайте архив Free for Web с fontawesome.com и распакуйте.
• Скопируйте в проект папки css и webfonts рядом, не меняя их взаимного расположения.
• Подключите основной файл и нужные стили. Путь пишется так же, как к любому файлу на сайте, правила те же, что при вставке картинки в HTML.

<link href="https://selcdn.checkroi.ru/assets/fontawesome/css/fontawesome.css" rel="stylesheet">
<link href="https://selcdn.checkroi.ru/assets/fontawesome/css/solid.css" rel="stylesheet">
<link href="https://selcdn.checkroi.ru/assets/fontawesome/css/brands.css" rel="stylesheet">

Документация советует подключать только нужные стили, а не all.css: для рабочего сайта он слишком тяжёлый. В седьмой версии шрифты лежат только в формате .woff2, старые .ttf и .woff из архивов прошлых версий новым CSS не нужны.

Через npm

npm install --save @fortawesome/fontawesome-free

Затем импортируйте стили в точке входа проекта: import '@fortawesome/fontawesome-free/css/all.min.css';. Для React и Vue у Font Awesome есть отдельные пакеты с SVG-иконками. Сборщики и фреймворки обычно проходят уже после вёрстки, на курсах фронтенд-разработки. Для WordPress есть официальный плагин Font Awesome, он ставится из админки.

Как найти иконку и вставить её на страницу

1. Откройте каталог иконок и введите слово по-английски: house, user, envelope.
2. Слева нажмите «Free Icons», чтобы скрыть платные значки.

3. Откройте карточку нужной иконки. На вкладке «HTML» лежит готовый код, а справа вверху код символа для CSS.
4. Скопируйте код и вставьте его в разметку.

Имя класса складывается из двух частей: стиль и название с префиксом fa-. Короткие формы fas, far, fab из пятой версии в CSS седьмой версии остались. Старые названия тоже работают как псевдонимы: в файле стилей fa-home указывает на тот же символ f015, что и fa-house.

Иконку можно вставить в текст, ссылку или кнопку в HTML. Font Awesome рекомендует тег <i>, но с теми же классами работает и <span>.

Размер, цвет и анимация иконок

Иконка в этом способе подключения работает как символ шрифта, поэтому по умолчанию она берёт font-size и color родителя. Как менять их в целом, рассказано в статьях про размер текста в CSS и цвет текста в HTML и CSS.

• Относительные размеры: fa-2xs, fa-xs, fa-sm, fa-lg, fa-xl, fa-2xl. Они заодно выравнивают значок по строке.
• Кратные размеры: от fa-1x до fa-10x, для крупных иконок, когда выравнивание по тексту не важно.
• Цвет: свойство color в CSS или в атрибуте style.
• Анимация: fa-spin вращает значок, fa-beat пульсирует.

<i class="fa-solid fa-house fa-2x"></i>
<i class="fa-solid fa-heart" style="color: #e11d48"></i>
<i class="fa-solid fa-spinner fa-spin"></i>

Так примеры из этой статьи выглядят в Chrome, все значки подгружены с cdnjs.

Одно изменение седьмой версии сбивает тех, кто пришёл из шестой. По описанию изменений v7 все иконки теперь выводятся фиксированной ширины, как раньше с классом fa-fw. Если нужна ширина по самому значку, добавьте fa-width-auto.

Иконка через CSS без тега в HTML

Иногда разметку трогать нельзя, а значок нужен, например перед телефоном в шапке. Тогда иконку ставят через псевдоэлемент ::before: шрифт берут из переменной Font Awesome, а символ по коду с карточки иконки.

.phone::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-solid);
  content: '\f095';
  margin-right: .4em;
}

Так рекомендует страница о псевдоэлементах: переменная --fa-font-solid сама подставляет нужное семейство и насыщенность. В старых уроках вместо неё пишут font-family: "Font Awesome 5 Free" и font-weight: 900. В седьмой версии семейство называется «Font Awesome 7 Free», а переменная подставляет название из подключённой версии сама.

Иконки и доступность для скринридеров

В седьмой версии иконки по умолчанию декоративные: программы экранного доступа их пропускают. Если значок несёт смысл, подпись нужно добавить самим. Два случая из справки по доступности:

• в кнопке без текста подпись ставится на кнопку, а не на иконку;
• в тексте подпись ставится на саму иконку вместе с role="img".

<button type="submit" aria-label="Написать нам">
  <i class="fa-solid fa-envelope"></i>
</button>

Мы <i class="fa-solid fa-heart" aria-label="любим" role="img"></i> пиццу

Класса sr-only в стилях седьмой версии больше нет. Если старый шаблон на него опирается, допишите это правило в свой CSS.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 800 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Частые ошибки и что с ними делать

Если иконки не отображаются, проверьте эти пять причин по порядку. Начните с инструментов разработчика в браузере: на панели сетевых запросов видно, загрузились ли CSS и файлы шрифтов.

• Квадрат или пустое место вместо значка. CSS подключён, а шрифт не нашёлся: папку webfonts переложили отдельно от css, и путь в стилях сломался. Решение: вернуть папки рядом, как в архиве.
• Иконка из Pro в бесплатной сборке. Классы fa-light, fa-thin, fa-duotone без подписки ничего не рисуют. Решение: в каталоге включить фильтр «Free Icons» и брать значок оттуда.
• Код из урока под старую версию. Русскоязычный сайт fontawesome.ru до сих пор описывает подключение версии 4.7.0. Если подключить файл оттуда, а код иконки взять с fontawesome.com, классов fa-solid и fa-house в старом файле не окажется. Решение: подключать ту же версию, под которую написан код, то есть текущую 7.3.1.
• Две версии на одной странице. Тема подключает шестую версию, плагин седьмую, и стили конфликтуют. Справка по WordPress отдельно разбирает случай, когда несколько версий Font Awesome грузят разные плагины и тема. Решение: оставить одно подключение.
• Свои классы с префиксом fa-. Документация не рекомендует так называть собственные классы: из-за этого иконки могут пропасть или вести себя непредсказуемо. Решение: свой префикс, например icon-.

Для одной-двух иконок на странице подключать всю библиотеку не обязательно. На карточке значка есть вкладка «SVG» с готовым кодом, его можно вставить прямо в HTML. Если сайт уже собран на Bootstrap, сравните Font Awesome с его собственным набором иконок.

Где освоить вёрстку системно

Иконки подключаются за пару минут. Чтобы уверенно собирать страницы целиком, нужны HTML, CSS, адаптивность и базовый JavaScript. Программы по CSS есть в разделе «Курсы CSS», а путь до первой работы описан в статье как стать фронтенд-разработчиком.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	36 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям36 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по CSS