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

Иконки - немаловажная часть любого дизайна. Многие иконки являются общепризнанными. К примеру, обозначения уборных в аэровокзалах. Ведь даже без знания языка, благодаря иконкам на дверях, вы без труда поймете, где находится мужская, а где - женская комната.

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

Однако процесс добавления иконок в меню CMS типа WordPress может оказаться непростой задачей. Если ваш сайт построен на WordPress, это руководство окажется полезным для вас и вы найдете самый простой способ отображения иконок в меню навигации.

Приступим

Добавлять иконки мы будем с помощью плагина Menu Icons. Для начала установите, и активируйте его:

Все готово. Можем приступать.

Добавление иконок

В этом примере я буду использовать TwentyTwelve, аккуратную и прозрачную тему WordPress. Также я создам несколько страниц, которые включу в меню.

Создаем пункт меню через Вид>Меню (Appearance > Menus). Не забудьте определить местоположение пункта меню, пока он не появится на сайте:

Теперь мы добавим иконки для каждого пункта. Развернем один из пунктов. Там вы найдете ссылку «Иконка: выбрать иконку» (Icon: Select icon). Выбираем пункт «Выбрать иконку» (Select icon). Откроется окно аналогичное окну медиа-библиотеки WordPress.

На момент написания этой статьи, плагин Menu Icons поставлялся с тремя библиотеками иконок - Dashicons, Genericons, и FontAwesome.

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

Иными словами, если начали использовать FontAwesome - используйте на сайте только эту библиотеку. Это позволит сохранить согласованность в стиле и придать сайту законченный вид:

При выборе иконки справа вы увидите превью. На панели справа можно произвести некоторые настройки. Можно поместить иконку перед или после пункта меню, изменить размер шрифта и установить вертикальное выравнивание.

Когда все настройки произведены, нажимайте кнопку Select и проделайте аналогичные действия с оставшимися пунктами меню:

Заключение

Плагин Menu Icons удобен и прост в использовании. Он великолепно интегрируется в интерфейс WordPress UI и интуитивен в использовании. Вдобавок ко всему разработчики планируют в следующих версиях включить несколько новых функций, включая новые библиотеки с иконками и возможность загрузки пользовательских иконок.

Надеюсь, это руководство окажется полезным для вас. Экспериментируйте и вы достигнете результата.