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

  Автор:
  5 комментариев
  9133

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

В этой статье я расскажу, как добавлять иконки к пунктам меню с помощью встроенных стилей 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:
Надежный проверенный годами хостинг для сайта на WordPress
а также, хостинг Beget:
Хостинг Beget

 

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

   4 голоса
Средняя оценка: 4 из 5
Если Вам понравилась статья и Вы нашли её полезной, поделитесь ею в соцсетях! Нажмите на кнопки ниже, чтобы сделать это прямо сейчас.

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик шаблона "AB-Inspiration" для самостоятельной и профессиональной настройки сайтов на WordPress для бизнеса. Основатель клуба "Мастер WordPress" и автор эксклюзивных курсов по WordPress. Фрилансер. Спикер.

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

Комментарии на Блог
5 комментариев
  1. Спасибо, Анфиса, за интересную статью. На главной иконка получилась. Но другие иконки вставать не хотят.

    • Елена, посмотрела на вашем блоге отображается иконка напротив пункта меню «Обо мне», на всех страницах. Напишите, пожалуйста, в комментарии адрес страницы на которой не отображается. Может просто нужно почистить кэш.

  2. Добавила в меню Контакты и ничего не отображается :(

  3. <i class=»fas fa-address-card»></i>

Ваш адрес email не будет опубликован. Обязательные поля помечены *