Установка

Перейдите на сайт 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. Вид иконок в браузере

Автор: Влад Мержевич
Последнее изменение: 16.02.2024