Перейдите на сайт Font Awesome и скачайте архив с последней версией. Внутри архива находится несколько папок, из которых нам важны css и fonts. Скопируйте их в свой проект. Если на сайте применяется Sass или Less, то понадобится и папка с соответствующим именем.
Теперь подключаем стилевой файл.
<link rel="stylesheet" href="css/font-awesome.min.css">
Обратите внимание, что имеется два стилевых файла. Тот, что с min в названии, представляет собой сокращённый вариант за счёт выбрасывания переносов строк, пробелов и символов табуляции. Это позволяет сократить объём файла, но при этом редактировать его довольно затруднительно.
Также вы можете использовать CDN (Content Delivery Network, сеть доставки контента) и подключить стилевой файл следующим образом.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
В этом случае вам не придётся загружать архив и разворачивать его на своём сайте, все шрифты для пользователя загрузятся с удалённого сервера.
Проверяем, как всё работает. Для этого добавим пару иконок и посмотрим, видны они или нет (пример 1).
Пример 1. Добавление иконок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<p><i class="fa fa-html5 fa-3x"></i>
<i class="fa fa-spinner fa-pulse fa-3x"></i></p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид иконок в браузере