PrestaShop 1.6.x. Как изменить значки Font Awesome

Sandra Kim Январь 29, 2016

fontawesome icon Prestashop

Rating: 5.0/5. From 2 votes.

Please wait...

Из этого туториала Вы узнаете, как изменить значки 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";
				
```
Сохраните изменения и обновите страницу для просмотра. Вы успешно изменили значки: