WordPress. Как изменить иконки «Material design»

Из этого туториала Вы узнаете, как изменить иконки «Material design» в шаблонах WordPress.

WordPress. Как изменить значки «Material design»

Material Design — это полный набор значков для обеспечения легко маштабируемой векторной графики сайта. Он используется для некоторых шаблонов WordPress, созданных TemplateMonster.com. Давайте узнаем, как изменить эти значки. Есть два способа заменить используемые значки:

1. При помощи шорткодов;
2. Используя CSS.

Давайте ознакомимся с двумя вариантами. Первый способ – это изменить значки, используя шорткоды (using shortcodes).

1. Откройте админ панель WordPress и перейдите на вкладку Страницы > Все страницы > Домашняя страница (Pages > All pages > Home). Найдите строку шорткода, в которой упоминается значок «Material design»:

   

2. Теперь давайте откроем Файловый менеджер (File Manager) и найдём файл ‘wp-content/themes/theme####/material/material-design.css’. Откройте файл, для того чтобы ознакомиться с его содержимым. Здесь Вы найдёте несколько вариантов каждого значка. Найдите класс CSS, который соответствует новому значку, и скопируйте его название из файла:

   

3. Вставьте это название значка вместо названия по-умолчанию в строку шорткода и сохраните внесённые изменения. Обновите ваш сайт и ознакомьтесь с результатом. Новый значок отобразится на сайте.

Второй способ – изменение значков «Material design», используя CSS (using CSS).

1. Нажмите правой кнопкой мышки на значок на сайте и используйте инструмент ‘Исследовать элемент’ (Inspect element), для того чтобы найти класс CSS значка, который Вы хотите изменить. Скопируйте класс CSS (Copy the CSS class) значка.

2. Вернитесь в админ панель WordPress и перейдите на вкладку Внешний вид > Редактор > style.css (Appearance > Editor> style.css). Вставьте класс CSS значка и убедитесь, что у него есть свойство ‘content’.

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

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

   .block_3  .service-box2:after {
     content: "\e11d" !important;
     }

5. Сохраните изменения, внесённые в файл style.css. Обновите Домашнюю страницу, для того чтобы увидеть результат.

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

WordPress. Как изменить значки «Material design»