FontAwsome 5 Pro

Как подключить FontAwsome 5 Pro в шаблоне Helix Ultimate?

Блог Просмотров: 1239

Популярный фреймворк Helix Ultimate поставляется с бесплатной ограниченной версией иконочного шрифта FontAwsome 5.

Конечно в некоторых случаях вполне достаточно бесплатной версии, но FontAwsome 5 Pro содержит гораздо больше иконок, и если вы читаете эту статью, значит вам нужна именно Pro версия и вы на правильном пути!

Итак начнем.

1. Для начала нам потребуется скачать FontAwsome 5 Pro.

В архиве fontawesome-pro-5.11.2-web и fontawesome-pro-5.11.2-desktop.

Нам нужна web версия, поэтому распакуйте архив fontawesome-pro-5.11.2-web.

2. Копируем файлы шрифта на сайт

Теперь нужно скопировать файлы шрифта из папки \fontawesome-pro-5.11.2-web\webfonts

в папку шаблона вашего сайта /public_html/templates/shaper_helixultimate/fonts

3. Подключаем шрифт в шаблоне

Можете просто скопировать приложенные файлы в /shaper_helixultimate/css

Скачать

Или сделайте самостоятельно так:

Содержимое файла /shaper_helixultimate/css/font-awesome.min.css в шаблоне заменить на содержимое из \fontawesome-pro-5.11.2-web\css\all.min.css

Для правильной работы шрифта После копирования содержимого all.min.css нужно еще поменять путь для файлов шрифта в конце файла: ../webfonts на ../fonts

fontawsome 5 pro

Затем содержимое файла fa-v4-shims.css в шаблоне заменить на содержимое из \fontawesome-pro-5.11.2-web\css\v4-shims.min.css

Теперь шрифт FontAwsome 5 Pro подключен и вы можете использовать его в шаблоне.

4. И на последок останется внести небольшие правки

Так как в шаблоне везде, где используются иконки, в css указан шрифт Font Awesome 5 Free или FontAwesome, поэтому вместо иконок могут появиться квадратики.

Чтобы это исправить нужно изменить "FontAwesome" или "Font Awesome 5 Free" на "Font Awesome 5 Pro" в файлах

menu.scss
offcanvas.scss
theme.scss
template.scss

На этом все.

Печать