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

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

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

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

   

   Для того чтобы заменить значок из Демо-контента нужным Вам, измените значение content в правиле CSS.

2. Откройте файлы сайта, используя FTP или Файловый менеджер Панели управления хостингом и перейдите в папку /catalog/view/theme/themeXXX/stylesheet. Найдите файл material-icons.css. Здесь Вы можете найти коды всех доступных значков Material Design.

3. Выберите нужный значок и скопируйте его код:

   

4. Вернитесь на ваш сайт и вставьте этот код в вышеупомянутое правило CSS, также добавьте !important. Если Вы правильно добавили код, Вы увидите, что значок изменился:

   

5. Нажмите правой кнопкой мышки на правило и выберите Скопировать правило (Copy rule declaration):

   

6. После того как Вы это сделаете, вернитесь в папку catalog/view/theme/themeXXX/stylesheet/ и откройте файл stylesheet.css. Вставьте правило в конец файла и сохраните изменения:

   

7. Откройте ваш сайт и обновите страницу. В некоторых случаях также необходимо очистить кэш браузера для просмотра изменений.

Вы успешно заменили значок Material Design в вашем шаблоне OpenCart 2.x.

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