Данный туториал покажет, как редактировать шрифтовые иконки Font Awesome в шаблонах WordPress.
WordPress. Как редактировать шрифтовые иконки Font Awesome
1. Обычно шрифтовые иконки Font Awesome используются для элементов меню в темах WordPress. См. скриншот.
2. Чтобы изменить иконки нажмите вкладку Appearance (Внешний вид)->Menus (Меню). Не забудьте активировать CSS Classes (классы СSS) в Screen Options (Настройках экрана).
3. В нашем случае элементу меню присвоен следующий класс: color-1 icon-home. Первый класс color-1 определяет цвет шрифта, второй icon-home — саму иконку. См. скриншоты.
4. Попробуем изменить иконку. Перейдите по следующей ссылке: http://fortawesome.github.io/Font-Awesome/cheatsheet/ Здесь находится полный список иконок. Для того, чтобы заменить исходную иконку, просто скопируйте ее класс.
5. Отредактируйте иконки таким же образом, задавая их класс в меню CSS Class.
6. Обновите домашнюю страницу и проверьте свой сайт. Как видим, иконки меню изменились.
7. Класс цвета определяет цвет шрифта. Имейте в виду, что такой функции может не быть в шаблоне. Проверьте классы цветов во всех родительских меню. Можно использовать один и тот же класс для нескольких элементов меню или для модификации уже существующего цвета.
8. Чтобы изменить существующий цвет, необходимо определить цвет шрифта, используя плагин для веб-разработки Firebug. Более детальную информацию о том, как использовать Firebug можно найти в туториале Firebug. Mozilla Firefox plugin.
9. В нашем случае цвет шрифта задается в файле main-style.css.
10. Откройте файл в текстовом редакторе и найдите необходимый код. Мы использовали редактор Notepad++.
11. Скопируйте линии кода, которые нужно изменить и вставьте их в файл style.css сразу после:
@import url("main-style.css");
Запомните, что все изменения нужно выполнять в файле дочерней темы style.css (не редактируйте непосредственно main-style.css, т.к. вы можете утратить все модификации, сделанные в этом файле).
См. измененный файл style.css.
12. Загрузите отредактированный файл style.css и обновите веб-страницу (очистите кэш и куки браузера в случае, если изменения не отображаются).
13. Мы изменили цвет. См. скриншот.
14. Более детальную информацию о шрифтовых иконках Font Awesome можно найти на сайте: http://fortawesome.github.io/Font-Awesome/
Вы также можете воспользоваться детальным видео туториалом: