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

  Автор:
  1283

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

В этой статье я расскажу, как добавлять иконки к пунктам меню с помощью встроенных стилей 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, то вы можете их подключить самостоятельно. Об этом я расскажу в отдельной статье. Оставайтесь на связи.

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

 

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

   3 голоса
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Оставьте свой комментарий:
5 комментариев
  1. Спасибо, Анфиса, за интересную статью. На главной иконка получилась. Но другие иконки вставать не хотят.

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

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

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

на Блоге
в Фейсбук
в Вконтакте