Как легко добавить иконки в меню WordPress

Без плагина WordSmall

wordpress меню-добавление иконок

Иконки в сайтостроении отыграют немаловажную роль, что вполне логично. Намного приятнее смотрится информационный блок, когда его дополняет осмысленная веб-иконка. И это по части только вершина, к примеру, трудно представить какой-нибудь софт или интерактивное меню без использования иконок.

В этой статье мы рассмотрим самый простой способ добавления иконок в меню WordPress. При этом обойдемся без каких-либо плагинов и крайней нужды лезть в шаблонные файлы. За исключение style.css так как придется прописывать стили. А также я не учитываю подключение шрифта Font Awesome исходя из того, что во многих темах изначально он уже подключен.

Первым делом переходим в админ-панель на вкладку «Внешний вид-Меню» и создаем новое (если ранее вы его не создавали).

icon-menu-wp1

menu-icon-wp2

Затем верхней панели «Настройки экрана» активируйте пункт «Классы CSS”.

wp-menu

Теперь когда откроете пункт меню вы увидите новое поле «Классы CSS (необязательно)». Сюда необходимо добавить класс одной из иконок, которую можете выбрать здесь.

tools-wp-menu4

После того как добавите все иконки ко всем пунктам меню нажмите кнопку «Сохранить меню». Вот что получилось у меня на данный момент (тему использовал Twenty Twelve).

rez-menu-wp5

Все отлично, не хватает только стилей, но сейчас это мы исправим. Откройте файл style.css и в конце пропищите следующие стили:

.menu-top-menu-new-container .fa::before {
    margin-right: 5px;
    font-size: 15px;
    font-weight: normal;
    color: #666;
}

Стили заданы всем иконкам сразу поскольку используется общий класс «fa». Чтобы задать каждой иконке абсолютно разный стиль применяйте индивидуальный класс (пример, fa-home).

Конечный результат.

iconmenu

Альтернативный способ

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

code-menu7

page-item-9 – это и есть уникальный класс. Только в этом случае иконка добавляется через content: «»; с помощью Unicode (просто копируйте иконку и вставляйте между кавычек content: " ! ";).

Пример.

.page-item-9 a::before {
    margin-right: 5px;
    font-size: 15px;
    font-weight: normal;
    color: #666;
   content: "\f003";
  font-family: FontAwesome;
}

Для всех пунктов сразу.

.page_item a::before {
    margin-right: 5px;
    font-size: 15px;
    font-weight: normal;
    color: #666;
   content: "\f003";
   font-family: FontAwesome;
}

Вот и все.

— Не забывайте делиться с друзьями в социальных сетях: —

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code