Домой / WordPress / Как добавить иконку в меню WordPress
Как добавить иконку в меню WordPress

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

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

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

К примеру, для многих уже привычно видеть иконку «конверта» или «земного шара» на пункте меню ведущего на страницу контактов, или иконку «домика» на пункте меню ведущего на главную страницу сайта.

О том  как правильно создавать и настраивать меню в WordPress Вы можете почитать в одном из прошлых уроков.

Создание меню с иконками в WordPress

Для создания меню с иконками мы будем использовать плагин Menu Icons. И так, начнем!

1. Устанавливаем и активируем плагин Menu Icons. О том как установить плагины в WordPress читайте в специальном уроке.

2. Переходим в Внешний вид -> Меню.

3. Нажимаем по стрелочке вниз на пункте меню, к которому мы хотим добавить иконку.

Как добавить иконку в меню WordPress: добавляем изображения в пункты меню сайта. Создание меню с иконками с помощью плагина Menu Icons

4. В настройках пункта меню нажимаем Select.

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

5. В открывшемся окне выбираем иконку, и указываем параметры отображения в настройках с правой стороны.

Свойство Position отвечает за позицию иконки в меню. Если Вы выберите Before — иконка будет отображаться перед названием пункта меню, а если Afterпосле названия.

Vertical align отвечает за выравнивание иконки по вертикали, значение Middle (выравнивание средней точки иконки по базовой линии) будет по умолчанию. Его менять не будем.

Font Size — настройка размера иконки. Чем больше значение — тем больше размер иконки.

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

После выбора иконки нажимаем в нижнем правом углу кнопку Select, а после кнопку «Сохранить меню».

Вот что получилось у нас в результате:

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

Таким образом, мы с Вами добавили иконку в меню. По аналогии иконки можно добавлять на все пункты и подпункты меню.

Как добавить свою картинку в меню

Для того чтобы загрузить и установить свою собственную картинку нужно сделать следующее:

1. В открывшемся окне, которое появляется после нажатия на Select (в пункте меню) нажимаем Image. После этого загружаем изображение на вкладке «Загрузить файлы» или выбираем из уже загруженных ранее файлов на вкладке «Библиотека файлов».

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

2. Сохраняем изменения нажав кнопку «Сохранить меню».

Как видите, ничего сложного в добавлении иконок в пункты меню WordPress нету. Плагин Menu Icons не требует настроек, а добавление иконок в меню не требует особых знаний.

Если у Вас возникнут по ходу добавления иконок в меню вопросы — задавайте их в комментариях и я постараюсь Вам помочь.


Здравствуйте, друзья! В этом уроке мы поговорим о том, как добавить иконки или изображения в меню сайта на WordPress. Добавление в меню собственных изображений или общепринятых иконок дает возможность посетителю сайта ускорить поиск нужного пункта меню или категории на сайте. Благодаря добавлению тематических изображений в пункты меню, посетители сайта смогут интуитивно догадываться о том, какую информацию они найдут перейдя по пункту меню. К примеру, для многих уже привычно видеть иконку "конверта" или "земного шара" на пункте меню ведущего на страницу контактов, или иконку "домика" на пункте меню ведущего на главную страницу сайта. О том  как правильно создавать и настраивать меню в WordPress Вы можете почитать в…

Обзор

Проголосуйте за урок

Рейтинг: 4.85 ( 8 голосов )
100

20 комментариев

  1. Николай

    После выхода из админки иконки пропадают, почему?
    Тема Virtue

  2. ни чего там не появилось!

  3. у меня сайт действующий я не буду ее менять. да там можно сказать это и не меню а просто надписи

    • В таком случае рекомендую искать ошибку внутри темы. А с учетом что это еще и не меню, то возможно плагин и не должен работать.

  4. Спасибо за статью, у меня всё получилось.

  5. Владимир

    Добрый день!
    Поставил плагин. все работает. Только Выводит иконку и название пункта. А как можно сделать чтобы название не выводилось? как на этом сайте пункт главная.

  6. нет, установить hide label

  7. Александр

    Здравствуйте, а как добавить или поменять иконки в статье например автор, дата публикации, коменнты и т.п. Скрин для наглядности
    masterwebs.ru/uploads/monthly_12_2015/post-23750-0-92284300-1449478782.png

    • С админки их не изменить. В файлах темы нужно найти шаблон отвечающий за вывод и заменить иконки. Более детально сказать сложно, так как в каждой теме все по своему индивидуально.

  8. здравствуйте как сделать так чтобы текст ссылки не высвечивался на сайте а показывает только значок

  9. Здравствуйте. После установки плагина сдвигаются другие иконки страницы, иконки тоже fontawesome. Редактировать положение кодом не получается. В чем может быть причина?

Оставить комментарий

Ваш email не будет опубликован.

*