Categories

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

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

Iris Burke Июль 1, 2016
Rating: 5.0. From 2 votes.
Please wait...

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

OpenCart_2.x.How_to_manage_Material_Design_icons1

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

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

    OpenCart_2.x.How_to_manage_Material_Design_icons2

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

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

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

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

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

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

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

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

OpenCart_2.x.How_to_manage_Material_Design_icons7

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

OpenCart 2.x. Как работать со значками Material Design
Скачать шаблоны OpenCart
Эта запись была размещена в OpenCart туториалы и помечена как icons, material design, Opencart2. Добавьте в закладки постоянную ссылку.

Submit a ticket

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