PrestaShop 1.5.x. Как редактировать шрифтовые иконки Font Awesome

Данный туториал покажет, как редактировать шрифтовые иконки Font Awesome в шаблонах PrestaShop 1.5.

PrestaShop 1.5.x. Как редактировать шрифтовые иконки Font Awesome

1. Проинспектируйте иконку при помощи аддона Firebug. Информацию о том, как использовать Firebug можно найти по ссылке. Обратите внимание на CSS код. Такая структура CSS означает, что в шаблоне используются иконки Font Awesome. Чтобы заменить иконку, нужно определить класс иконки и изменить его в файлах шаблона. В нашем случае иконка имеет класс icon-shopping-cart

   

2. Скопируйте название кода и проведите поиск по файлам шаблона. Лучше всего искать код при помощи программы Notepad++. Откройте редактор Notepad++ (можно скачать на сайте http://notepad-plus-plus.org/). Нажмите CTRL+F и откройте вкладку Find in Files (Поиск по файлам). Выберите папку темы (со всеми файлами), установите настройки как на скриншоте и нажмите Find All (Искать все).

   

3. Появился список файлов, в которых находится код icon-shopping-cart . В нашем случае иконку нужно изменить в blockuserinfo, поэтому мы будем редактировать файл themes\theme786\modules\blockuserinfo\blockuserinfo.tpl (в разных случаях нужно редактировать разные файлы). Название класса нужно изменять только в файлах .tpl или .php.

   

4. Откройте страницу Font Awesome Cheatsheet. Здесь находится список иконок и их классов. Скопируйте название класса и замените исходный. Внимание, не все иконки могут отображаться, поскольку для новых иконок font awesome icons могут быть не заданы стили в шаблоне. На скриншоте показан измененный код. Сохраните изменения и загрузите файл на сервер.

   

5. Почистите кэш и куки браузера, почистите кэш PrestaShop обновите страницу. Если все было сделано правильно, на сайте появятся новые иконки.

   

Вы также можете воспользоваться детальным видео туториалом:

PrestaShop 1.5.x. Как редактировать шрифтовые иконки Font Awesome