[CSS] Как добавить иконки к пунктам меню в шаблоне AB-Inspiration

Иконки здорово украшают текст и привлекают внимание. А еще, если иконка подобрана правильно, читателю проще понять, о чем текст просто взглянув на картинку.

В этой статье я расскажу, как добавлять иконки к пунктам меню с помощью встроенных стилей FontAwesome. Вам не придется редактировать код, или подключать скрипты, стили, библиотеки. Все уже встроено в шаблон AB-Inspiration. Вам же нужно просто выбрать необходимую иконку из cписка предложенных и прописать ее код рядом с пунктом меню.

В одной из статей на блоге мы уже разобрались, как сделать кнопку в меню. Статью можно почитать здесь: [CSS] Как добавить кнопку в меню в шаблоне AB-Inspiration. Теперь добавим иконку к пункту меню Главная.

Иконка будет выглядеть так:

Главная

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

Итак, поехали.

1. Перейдите в раздел «Внешний вид» -> «Меню»
2. Откройте меню, которое хотите отредактировать
3. Откройте пункт меню Главная (если его нет, добавьте страницу Главная в меню)
4. Перед словом Главная вставьте следующий код (ниже я объясню, где брать такие коды для разных иконок):

 <i class="fa fa-home" aria-hidden="true"></i> 

5. Сохраните изменения

Теперь можно посмотреть, что получилось.

Где брать коды иконок FontAwesome

FontAwesome это коллекция иконок в виде шрифтов. Чтобы подобрать нужную иконку необходимо

1. перейти на сайт https://fontawesome.com/icons
2. Выберите слева в меню опцию Free
3. Выберите нужную иконку и кликните по ней (вы можете воспользоваться поиском или категориями иконок слева в меню)

4. на странице иконки спуститесь ниже и скопируйте код

Далее вы можете вставить этот код в пункты меню

Как подключить стили FontAwesome

Если у вас блог не на шаблоне AB-Inspiration и в вашем шаблоне не подключены стили FontAwesome, то вы можете их подключить самостоятельно. Об этом я расскажу в отдельной статье. Оставайтесь на связи.

На этом все. Если у вас есть вопросы, не стесняйтесь задавать в комментариях. Буду рада вам помочь.

Создать сайт для заработка с нами — легко и быстро!

За помощью обращайтесь в нашу службу поддержки 24/7

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:

а также, хостинг Beget: