Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

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

Из этого туториала Вы узнаете, как изменить значки Font Awesome в Prestashop 1.6.x.

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

  1. Исследуйте значок, используя Инструмент разработчика в вашем браузере, например, Firebug (для Mozilla Firefox), для того чтобы узнать, каким способом этот значок добавлен. Вы можете узнать о том, как использовать плагин Firebug тут.

  2. В нашем случае, значок закреплён за селектором CSS:

    					.shopping_cart > a:first-child::before
    				

    prestashop_how_to_change_font_awesome_icons_1

  3. Для того чтобы изменить значок, Вам нужно внести изменения в файл, где находится код значка. Вы можете узнать путь к этому файлу, используя Firebug. Нажмите правой кнопкой мышки на название файла в Firebug и выберите Скопировать расположение (Copy Location). Вставьте скопированную ссылку в Блокнот или любой другой текстовый редактор на вашем компьютере. Вы увидите полный путь к файлу:

    prestashop_how_to_change_font_awesome_icons_2

  4. В нашем случае, нужно внести изменения в код CSS на строке 33 в файле blockcart.css, который находится в папке themes/themeXXXX/css/modules/blockcart/ на сервере. Для того чтобы внести изменения в этот файл, войдите в Панель управления хостингом.
  5. Откройте Менеджер файлов (File Manager) и перейдите в папку вашего сайта (Вы можете также выполнить дальнейшие шаги, используя FTP).

  6. Перейдите в папку themes/themeXXXX/css/modules/blockcart/ и откройте файл blockcart.css:

    prestashop_how_to_change_font_awesome_icons_3

  7. Найдите нужную строку (в нашем случае, это строка 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:

    prestashop_how_to_change_font_awesome_icons_4

  8. Вы можете использовать этот Список значков Font Awesome, для того чтобы выбрать другой значок и найти соответствующее кодовое значение. Вы можете также найти код значка, используя поиск в Интернете.

  9. Давайте выберем значок «Подарок». Нажмите на ссылку значка и найдите его значение Юникод. Скопируйте значение — f06b. Обратите внимание, некоторые значки могут не отобразиться на сайте, так как для новых значков Font Awesome отсутствуют стили в файлах шаблона:

    prestashop_how_to_change_font_awesome_icons_5

  10. Вернитесь в файл blockcart.css. Замените существующий код значка на тот, который Вы скопировали. Удалите обратную косую черту перед кодом. В нашем случае, изменённый код для свойства content должен выглядеть следующим образом:

    					content: "\f06b";
    				

    prestashop_how_to_change_font_awesome_icons_6

  11. Сохраните изменения и обновите страницу для просмотра. Вы успешно изменили значки:

    prestashop_how_to_change_font_awesome_icons_7

Теперь Вы знаете, как изменить значки Font Awesome в Prestashop 1.6.x.

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

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