Обновление fontawesome opencart
2022-11-15
Информация актуальна для opencart 2.3
Opencart отображает разнообразные иконки не просто выводом картинок, а посредством плагина FontAwesome. Этот плагин содержит файл шрифта с иконками и выводятся на страницу как текст. Для этого используется тег с классом и именем нужной иконки, например <i class="fa fa-user"></i> покажет иконку пользователя.
С момента выхода opencart прошло достаточно много времени, и плагин FontAwesome выпустил несколько обновлений, и в этой статье я расскажу как сделать обновление этого плагина, а также как использовать иконки из PRO версии бесплатно.
Установка FontAwesome FREE
Сначала с сайта https://fontawesome.com/download скачиваем архив Free For Web, или можно скачать прямо с отсюда Из этого архива нам понадобится файл all.min.css, и папка WebFonts. Эти файлы нужно скопировать в папку catalog/view/javascript/font-awesome, предварительно удалив все содержимое в ней.
Теперь можно пойти двумя путями: переименовать файл all.min.css в файл font-awesome.min.css
или же исправить header.tpl из папки catalog/view/theme/default/template/common/. В нем нужно изменить строку
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />на
<link href="catalog/view/javascript/font-awesome/css/all.min.css" rel="stylesheet" type="text/css" />
Установка окончена.
Установка FontAwesome PRO
На сайте fontawesome.com имеется возможность поиска нужной иконки, и многие из необходимых могут оказаться доступными только в PRO версии. Но на самом сайте все эти иконки отображаются, а соответственно имеется возможность получить файлы PRO шрифтов и css, работающий с ними.
Вы можете скачать их самостоятельно, или же можете скачать уже готовый архив FontAwesome PRO и установить на свой сайт. Пользоваться можно всеми видами иконок - sharp, thin, light, duotone.
Пользоваться PRO версией не рекомендую, так как файлы шрифтов имеют достаточно большой размер и могут замедлить загрузку сайта.
Добавление своих иконок
Иногда возникает потребность в добавлении своих иконок, которых нет даже в PRO-версии, для этого можно добавить собственные иконки непосредственно в шрифт. Для этого необходима программа FontLab.
После запуска программы нужно открыть шрифт, для редактирования я использовал шрифт fa-regular-400.ttf. В открывшемся окне нужно добавить новую иконку(Glyph). Нажимаем правой кнопкой мыши и в контекстном меню выбираем New Glyph.
![Добавить свою иконку в шрифт](/images/fontawesome/1.webp)
Вводим какое-нибудь имя новой иконки. После чего откроется редактор иконки, здесь можно нарисовать новую иконку, если вы умеете работать с векторной графикой, то проблем с этим у вас не будет, или можно импортировать уже готовый векторный файл. Рисовать мы ничего не будем, а импортируем готовый svg файл с иконкой. File-Import-Artwork.
![Импорт SVG в шрифт](/images/fontawesome/2.webp)
После импорта появится изображение, его необходимо растянуть до необходимых размеров и отцентровать. Растягивать лучше всего с зажатым SHIFT, так изображение будет увеличиваться пропорционально. Для центровки - в контекстном меню выбрать Align-Center.
![Подогнать иконку под размер glyph](/images/fontawesome/3.webp)
Теперь в том же контекстном меню выбрать Make SVG Editable, так мы получим возможность редактировать вектор, но это нам сейчас не нужно. А нужно этот вектор обвести в контур, для этого в верхнем меню выбираем Element-Expand Stroke.
![Обводка контура SVG](/images/fontawesome/4.webp)
Теперь появился контур, и видно что контур немного кривой, исправляем это - просто передвигая точки контура. В итоге должно получиться то что надо. В окне предпросмотра справа видно, что иконка выглядит как надо, а в заголовке окна также видно, что иконка заползает на предыдущую букву, значит надо исправить размер холста, для этого нажать на кнопку |А|(Show spacing controls), появятся границы, их нужно передвинуть до шириниы изображения. После этого иконка будет отображаться корректно.
![Размер холста иконки FontLab](/images/fontawesome/5.webp)
Закрываем вкладку редактирования или просто переключаем на вкладку шрифта. Теперь нжуно новой иконке присвоить код, для этого открываем после нажатия правой кнопкой на новую иконку выбираем Rename Glyph.
![Присваем код для новой иконки](/images/fontawesome/6.webp)
В открышемся окне нужно указать New unicode. Новый код я указал F5C9, т.к. код предыдущей иконки был F5C8.
![Новый unicode для иконки FontLab](/images/fontawesome/7.webp)
Теперь осталось только сохранить шрифт и скопировать на сайт. В верхнем меню переходим File-Export Font As. Выбираете путь для сохранения.
![Сохранение шрифта в FontLab](/images/fontawesome/8.webp)
В результате, в указанной папке появится два файла шрифта, нам нужен тот что без SVG. В моем случае это fa-regular-400.ttf, его нужно скопировать в папку webfonts плагина FontAwesome.
Теперь нужно отредактировать css файл all.min.css, в него нужно добавить новое правило для вывода этой иконки. Т.к. я знаю что предыдущая иконка имела адрес F5C8, то ищем правило где он используется, и после добавляем новое правило:
.fa-newuser:before{content:"\f5c9"}
Вот теперь можно использовать нашу новую иконку на сайте, для этого нужно вставить код <i class="fa-regular fa-newuser></i> в нужном месте. Если иконка меньше или больше необходимого размера, то просто нужно поправить ее в редакторе и снова сохранить шрифт.
Для примера, я установил эту иконку в шапке сайта возле личного кабинета, глянуть можно здесь. А также на этом сайте установлен пакет FontAwesome PRO.
Ссылки на файлы и пример работы сайта:
FontAwesome 6 Free
FontAwesome 6 Pro
OpenCart с обновленными иконками