Font Awesome 5 - Локальная установка и подключение

DOWNLOAD

Сообщения
158
Симпатии
16
Баллы
18
#1
Font Awesome 5 существует в бесплатном и платном варианте, в бесплатном на данный момент времени 893 иконки, в платном 1,283 и дополнительные возможности.
Здесь будет описано подключения бесплатного пака иконок.

Справедливо сказать, что самый простой вариант, это подключить Font Awesome 5 из CDN.
Для этого достаточно в шаблоне PAGE_CONTAINER.
Найти такой код:
<head>
И под ним, добавить такую строчку, если хотим использовать SVG формат иконок.
<script defer src="[URL]https://use.fontawesome.com/releases/v5.0.0/js/all.js[/URL]"></script>
Если Вы всё же приверженец шрифтовых, то добавляем такую.
<link href="[URL]https://use.fontawesome.com/releases/v5.0.0/css/all.css[/URL]" rel="stylesheet">

Но здесь вы полностью зависимы от внешнего источника, да и загрузка страниц может быть чуть медленнее.
Да и многие предпочитают, что бы всё подгружалось только с их сервера или хостинга.

Ну что же приступим, для того что бы Font Awesome 5, подгружался локально для вашего форума.

Шаг 1
Скачиваем последнюю версию Font Awesome 5.

Шаг 2
Извлекаем содержимое zip-архива в удобное для вас место.

Шаг 3
Забираем файл - fontawesome-all.js, из каталога - fontawesome-free-5.0.0/svg-with-js/js/, если хотим использовать SVG формат иконок.
Или файл - fontawesome-all.css, из каталога - fontawesome-free-5.0.0/web-fonts-with-css/css/ и папку - webfonts, из из каталога - fontawesome-free-5.0.0/web-fonts-with-css/, если хотим использовать шрифтовые иконки.

Шаг 4
Создаём каталог fontawesome, в корневой каталог вашего форума и загружаем туда файл - fontawesome-all.js для SVG.
Или файл - fontawesome-all.js и папку - webfonts, если хотим использовать шрифтовые иконки.

Шаг 5
В шаблоне PAGE_CONTAINER.
Находим такой код.
<head>
И под ним добавить для SVG.
<script defer src="/fontawesome/fontawesome-all.js"></script>
Или шрифтовых.
<link href="/fontawesome/fontawesome-all.css" rel="stylesheet">
И сохранить шаблон.

Теперь можно использовать Font Awesome 5 в своих целях.

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

Здесь я лишь затрону момент обратной совместимости с Font Awesome 4.
Разработчики предусмотрели такую возможность для этого нам нужно выполнить пару не хитрых шагов.

И так, предварительно удаляем все старые подключения и файлы от Font Awesome 4.
Так как это миграция на Font Awesome 5, то шрифтовых иконок для Font Awesome 4 здесь нет, по этому и будет пропущено описание данного процесса.

Конечно же здесь так же присутствует вариант подключить Font Awesome 4 из CDN.
Для этого, если Вы уже выполнили подключение Font Awesome 5, Вам просто нужно будет добавить под.
<script defer src="[URL]https://use.fontawesome.com/releases/v5.0.0/js/all.js[/URL]"></script>
Такую строчку.
<script defer src="[URL]https://use.fontawesome.com/releases/v5.0.0/js/v4-shims.js[/URL]"></script>
В итоге, всё должно выглядеть так.

JavaScript:
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/v4-shims.js"></script>
И сохранить шаблон.

Более подробно про миграцию и новый синтаксис, можно почитать на офф сайте.

На этом всё, надеюсь данный мануал будет кому-то полезен.
 
Последнее редактирование: