- Совместимость с XenForo
- 1.0
- 1.1
- 1.2
- 1.3
- 1.4
- 1.5
Font Awesome 5 существует в бесплатном и платном варианте, в бесплатном на данный момент времени 1,588 иконок, в платном 7,842 и дополнительные возможности.
Здесь будет описано подключения бесплатного пака иконок.
Справедливо сказать, что самый простой вариант, это подключить Font Awesome 5 из CDN.
Для этого достаточно в шаблоне
Найти такой код:
И под ним, добавить такую строчку, если хотим использовать SVG формат иконок.
Если Вы всё же приверженец шрифтовых, то добавляем такую.
Но здесь вы полностью зависимы от внешнего источника, да и загрузка страниц может быть чуть медленнее.
Да и многие предпочитают, что бы всё подгружалось только с их сервера или хостинга.
Ну что же приступим, для того что бы Font Awesome 5, подгружался локально для вашего форума.
Шаг 1
Скачиваем последнюю версию .
Шаг 2
Извлекаем содержимое zip-архива в удобное для вас место.
Шаг 3
Забираем файл -
Или файл -
Шаг 4
Создаём каталог
Или файл -
Шаг 5
В шаблоне
Находим такой код.
И под ним добавить для SVG.
Или шрифтовых.
И сохранить шаблон.
Теперь можно использовать 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, Вам просто нужно будет добавить под.
Такую строчку.
В итоге, всё должно выглядеть так.
Для того что бы совместимость с Font Awesome 4, работала локально для вашего форума.
Шаг 1
Скачиваем последнюю версию .
Шаг 2
Извлекаем содержимое zip-архива в удобное для вас место.
Шаг 3
Забираем файл -
Шаг 4
Загружаем
Шаг 5
Если Вы уже выполнили подключение Font Awesome 5 локально, Вам просто нужно будет
в шаблоне
И под ним добавить.
В итоге, всё должно выглядеть так.
И сохранить шаблон.
Более подробно про миграцию и новый синтаксис, .
На этом всё, надеюсь данный мануал будет кому-то полезен.
Здесь будет описано подключения бесплатного пака иконок.
Справедливо сказать, что самый простой вариант, это подключить Font Awesome 5 из CDN.
Для этого достаточно в шаблоне
PAGE_CONTAINER.Найти такой код:
<head>И под ним, добавить такую строчку, если хотим использовать SVG формат иконок.
<script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>Если Вы всё же приверженец шрифтовых, то добавляем такую.
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">Но здесь вы полностью зависимы от внешнего источника, да и загрузка страниц может быть чуть медленнее.
Да и многие предпочитают, что бы всё подгружалось только с их сервера или хостинга.
Ну что же приступим, для того что бы Font Awesome 5, подгружался локально для вашего форума.
Шаг 1
Скачиваем последнюю версию .
Шаг 2
Извлекаем содержимое zip-архива в удобное для вас место.
Шаг 3
Забираем файл -
all.js, из каталога - fontawesome-free-5.13.0-web/js/, если хотим использовать SVG формат иконок.Или файл -
all.css, из каталога - fontawesome-free-5.13.0-web/css/ и папку - webfonts, из каталога - fontawesome-free-5.13.0-web/, если хотим использовать шрифтовые иконки.Шаг 4
Создаём каталог
fontawesome, в корневой каталоге вашего форума и загружаем туда файл - all.js для SVG.Или файл -
all.css и папку - webfonts, если хотим использовать шрифтовые иконки.Шаг 5
В шаблоне
PAGE_CONTAINER.Находим такой код.
<head>И под ним добавить для SVG.
<script defer src="/fontawesome/all.js"></script>Или шрифтовых.
<link href="/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="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>Такую строчку.
<script defer src="https://use.fontawesome.com/releases/v5.13.0/js/v4-shims.js"></script>В итоге, всё должно выглядеть так.
JavaScript:
<script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.13.0/js/v4-shims.js"></script>Для того что бы совместимость с Font Awesome 4, работала локально для вашего форума.
Шаг 1
Скачиваем последнюю версию .
Шаг 2
Извлекаем содержимое zip-архива в удобное для вас место.
Шаг 3
Забираем файл -
v4-shims.js, из каталога - fontawesome-free-5.13.0-web/js/.Шаг 4
Загружаем
v4-shims.js в каталог fontawesome, который создали ранее в корневом каталог вашего форума.Шаг 5
Если Вы уже выполнили подключение Font Awesome 5 локально, Вам просто нужно будет
в шаблоне
PAGE_CONTAINER находим такой код.<script defer src="/fontawesome/all.js"></script>И под ним добавить.
<script defer src="/fontawesome/v4-shims.js"></script>В итоге, всё должно выглядеть так.
JavaScript:
<script defer src="/fontawesome/all.js"></script>
<script defer src="/fontawesome/v4-shims.js"></script>Более подробно про миграцию и новый синтаксис, .
На этом всё, надеюсь данный мануал будет кому-то полезен.
Font Awesome 5 существует в бесплатном и платном варианте, в бесплатном на данный момент времени 1109 иконок, в платном 1,877 и дополнительные возможности.
Здесь будет описано подключения бесплатного пака иконок.
Справедливо сказать, что самый простой вариант, это подключить Font Awesome 5 из CDN.
Для этого достаточно в шаблоне
Найти такой код:
И под ним, добавить такую строчку, если хотим использовать SVG формат иконок.
Если Вы всё же приверженец шрифтовых, то добавляем такую.
Но здесь вы полностью зависимы от внешнего источника, да и загрузка страниц может быть чуть медленнее.
Да и многие предпочитают, что бы всё подгружалось только с их сервера или хостинга.
Ну что же приступим, для того что бы Font Awesome 5, подгружался локально для вашего форума.
Шаг 1
Скачиваем последнюю версию .
Шаг 2
Извлекаем содержимое zip-архива в удобное для вас место.
Шаг 3
Забираем файл -
Или файл -
Шаг 4
Создаём каталог
Или файл -
Шаг 5
В шаблоне
Находим такой код.
И под ним добавить для SVG.
Или шрифтовых.
И сохранить шаблон.
Теперь можно использовать 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, Вам просто нужно будет добавить под.
Такую строчку.
В итоге, всё должно выглядеть так.
Для того что бы совместимость с Font Awesome 4, работала локально для вашего форума.
Шаг 1
Скачиваем последнюю версию .
Шаг 2
Извлекаем содержимое zip-архива в удобное для вас место.
Шаг 3
Забираем файл -
Шаг 4
Загружаем
Шаг 5
Если Вы уже выполнили подключение Font Awesome 5 локально, Вам просто нужно будет
в шаблоне
И под ним добавить.
В итоге, всё должно выглядеть так.
И сохранить шаблон.
Более подробно про миграцию и новый синтаксис, .
На этом всё, надеюсь данный мануал будет кому-то полезен.
Здесь будет описано подключения бесплатного пака иконок.
Справедливо сказать, что самый простой вариант, это подключить Font Awesome 5 из CDN.
Для этого достаточно в шаблоне
PAGE_CONTAINER.Найти такой код:
<head>И под ним, добавить такую строчку, если хотим использовать SVG формат иконок.
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>Если Вы всё же приверженец шрифтовых, то добавляем такую.
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">Но здесь вы полностью зависимы от внешнего источника, да и загрузка страниц может быть чуть медленнее.
Да и многие предпочитают, что бы всё подгружалось только с их сервера или хостинга.
Ну что же приступим, для того что бы Font Awesome 5, подгружался локально для вашего форума.
Шаг 1
Скачиваем последнюю версию .
Шаг 2
Извлекаем содержимое zip-архива в удобное для вас место.
Шаг 3
Забираем файл -
fontawesome-all.js, из каталога - fontawesome-free-5.0.13/svg-with-js/js/, если хотим использовать SVG формат иконок.Или файл -
fontawesome-all.css, из каталога - fontawesome-free-5.0.13/web-fonts-with-css/css/ и папку - webfonts, из из каталога - fontawesome-free-5.0.13/web-fonts-with-css/, если хотим использовать шрифтовые иконки.Шаг 4
Создаём каталог
fontawesome, в корневой каталоге вашего форума и загружаем туда файл - fontawesome-all.js для SVG.Или файл -
fontawesome-all.css и папку - 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="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>Такую строчку.
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fa-v4-shims.js"></script>В итоге, всё должно выглядеть так.
JavaScript:
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fa-v4-shims.js"></script>Для того что бы совместимость с Font Awesome 4, работала локально для вашего форума.
Шаг 1
Скачиваем последнюю версию .
Шаг 2
Извлекаем содержимое zip-архива в удобное для вас место.
Шаг 3
Забираем файл -
fa-v4-shims.js, из каталога - fontawesome-free-5.0.13/svg-with-js/js/.Шаг 4
Загружаем
fa-v4-shims.js в каталог fontawesome, который создали ранее в корневом каталог вашего форума.Шаг 5
Если Вы уже выполнили подключение Font Awesome 5 локально, Вам просто нужно будет
в шаблоне
PAGE_CONTAINER находим такой код.<script defer src="/fontawesome/fontawesome-all.js"></script>И под ним добавить.
<script defer src="/fontawesome/fa-v4-shims.js"></script>В итоге, всё должно выглядеть так.
JavaScript:
<script defer src="/fontawesome/fontawesome-all.js"></script>
<script defer src="/fontawesome/fa-v4-shims.js"></script>Более подробно про миграцию и новый синтаксис, .
На этом всё, надеюсь данный мануал будет кому-то полезен.
