Іконки — важлива частина будь-якого дизайну. Багато іконки є загальновизнаними. Наприклад, позначення вбиралень в аеровокзалах. Адже навіть без знання мови, завдяки іконок на дверях, ви без праці зрозумієте, де знаходиться чоловіча, а де — жіноча кімната.

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

Однак процес додавання іконок в меню CMS типу WordPress може виявитися непростим завданням. Якщо ваш сайт побудований на WordPress, це керівництво виявиться корисним для вас і ви знайдете найпростіший спосіб відображення іконок в меню навігації.

Приступимо

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

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

Додавання іконок

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

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

Як додати іконки в меню сайту на WordPress

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

На момент написання цієї статті, плагін Menu Icons поставлявся з трьома бібліотеками іконок — Dashicons, Genericons, і FontAwesome.

Можна набрати іконки відразу з трьох бібліотек. Але краще зробити набір з однієї. Тому як в бібліотеках іконки підібрані за подобою, мають схожі розміри і вигини.

Іншими словами, якщо почали використовувати FontAwesome — використовуйте на сайті тільки цю бібліотеку. Це дозволить зберегти узгодженість в стилі і надати сайту закінчений вигляд:

Як додати іконки в меню сайту на WordPress

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

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

Як додати іконки в меню сайту на WordPress

Висновок

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

Сподіваюся, це керівництво виявиться корисним для вас. Експериментуйте і ви досягнете результату.

Переклад статті «How To Display Icons In WordPress Menu» був підготовлений дружною командою проекту Сайтостроение від А до Я.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here