- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
PrestaShop 1.6.x. Как изменить значки Font Awesome
Январь 29, 2016
Из этого туториала Вы узнаете, как изменить значки Font Awesome в Prestashop 1.6.x.
PrestaShop 1.6.x. Как изменить значки Font Awesome
-
Исследуйте значок, используя Инструмент разработчика в вашем браузере, например, Firebug (для Mozilla Firefox), для того чтобы узнать, каким способом этот значок добавлен. Вы можете узнать о том, как использовать плагин Firebug тут.
-
В нашем случае, значок закреплён за селектором CSS:
.shopping_cart > a:first-child::before
-
Для того чтобы изменить значок, Вам нужно внести изменения в файл, где находится код значка. Вы можете узнать путь к этому файлу, используя Firebug. Нажмите правой кнопкой мышки на название файла в Firebug и выберите Скопировать расположение (Copy Location). Вставьте скопированную ссылку в Блокнот или любой другой текстовый редактор на вашем компьютере. Вы увидите полный путь к файлу:
- В нашем случае, нужно внести изменения в код CSS на строке 33 в файле blockcart.css, который находится в папке themes/themeXXXX/css/modules/blockcart/ на сервере. Для того чтобы внести изменения в этот файл, войдите в Панель управления хостингом.
-
Откройте Менеджер файлов (File Manager) и перейдите в папку вашего сайта (Вы можете также выполнить дальнейшие шаги, используя FTP).
-
Перейдите в папку themes/themeXXXX/css/modules/blockcart/ и откройте файл blockcart.css:
-
Найдите нужную строку (в нашем случае, это строка 33) в файле blockcart.css. Вы увидите код, который Вы ранее видели в Firebug:
.shopping_cart > a:first-child:before { content: "\f07a"; position: absolute; font-family: "FontAwesome"; display: inline-block; font-size: 36px; font-weight: 400; color: #fbdd12; left: 2px; top: 6px; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
Значок имеет кодовое значение \f07a, которое задано в CSS свойстве content:
-
Вы можете использовать этот Список значков Font Awesome, для того чтобы выбрать другой значок и найти соответствующее кодовое значение. Вы можете также найти код значка, используя поиск в Интернете.
-
Давайте выберем значок «Подарок». Нажмите на ссылку значка и найдите его значение Юникод. Скопируйте значение — f06b. Обратите внимание, некоторые значки могут не отобразиться на сайте, так как для новых значков Font Awesome отсутствуют стили в файлах шаблона:
-
Вернитесь в файл blockcart.css. Замените существующий код значка на тот, который Вы скопировали. Удалите обратную косую черту перед кодом. В нашем случае, изменённый код для свойства content должен выглядеть следующим образом:
content: "\f06b";
-
Сохраните изменения и обновите страницу для просмотра. Вы успешно изменили значки:
Теперь Вы знаете, как изменить значки Font Awesome в Prestashop 1.6.x.
Вы можете также ознакомиться с детальным видео-туториалом ниже: