[contact-form-7 id="24085" title="Feedback RU"]

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

PrestaShop 1.6.x. Как работать со значками Material Design

Из этого туториала Вы узнаете, как работать со значками Material Design в шаблонах PrestaShop.

PrestaShop 1.6.x. Как работать со значками Material Design

Для того чтобы изменить значки, следуйте таким инструкциям:

  1. Во-первых, найдите элемент и узнайте класс, используя инструмент Firebug, который можно включить, нажав правой кнопкой мышки на экран и выбрав Исследовать элемент (Inspect Element) из выпадающего списка:

    PrestaShop-1.6.x.-How-to-manage-Material-Design-icons-1

  2. Узнайте класс CSS значка, который Вы хотите изменить:

    PrestaShop-1.6.x.-How-to-manage-Material-Design-icons-2

  3. Откройте файл ‘themes/themeXXXX/css/material-design.css’ и найдите значение, которое Вы хотели бы использовать вместо значения по умолчанию:

    PrestaShop-1.6.x.-How-to-manage-Material-Design-icons-3

  4. Откройте файл global.css, который расположен в папке css вашего шаблона. Вставьте класс CSS значка вниз файла и убедитесь, что после него есть строка ‘content’.

  5. Выставьте новое значение свойства «content» в файл global.css. Не забудьте использовать ‘!important’, для того чтобы изменение CSS прошло успешно. Итоговое правило CSS должно выглядеть следующим образом:

    .material-design-shopping232::before {
    				content: "\e002" !important;
    			}  

    PrestaShop-1.6.x.-How-to-manage-Material-Design-icons-4

  6. Вернитесь на ваш сайт и обновите страницу, в которую Вы внесли изменения. Убедитесь, что Вы успешно внесли изменения.

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

PrestaShop 1.6.x. Как работать со значками Material Design