Перейти к публикации
4.4.2

Иконки в меню навигации форума


Описание

Добавляем иконки Font Awesome в навигационное меню.

Как нам уже известно в IPS 4 интегрирован шрифт FontAwesome и множество мелких элементов основаны именно на нём. Многие используют иконки для вкладок в навигационном меню, но в стоковом состоянии их нет. Для того, чтобы добавить необходимые иконки для нужных вкладок, идём по пути:

АЦ -> Внешний вид -> Стиль -> Стили и шаблоны -> Выбираем свой стиль(в данном случае это стандартный стиль Default) и нажимаем кнопку "Изменить HTML и CSS"

Далее открываем кладку CSS и идём по пути(должно открыться сразу):

Core -> Front -> Custom -> custom.css

И добавляем наше оформление:

#ipsLayout_mainNav > li > a:before {
  font: normal normal normal 14px/1 FontAwesome;
  padding-right: 5px;
}

.elNavigation_app_forums_Forums:before {
  content: '\f086';
}
.elNavigation_app_gallery_Gallery:before {
  content: '\f03e';
}
.elNavigation_app_downloads_Downloads:before {
  content: '\f019';
}
.elNavigation_app_cms_0:before {
  content: '\f0f6';
}
.elNavigation_app_blog_Blogs:before {
  content: '\f02d';
}
.elNavigation_app_members_members:before {
  content: '\f0c0';
}
.elNavigation_app_portal_Portal:before {
  content: '\f1d1';
}
.elNavigation_app_calendar_Calendar:before {
  content: '\f073';
}

Как видно из кода, иконки добавлены для вкладок:

Forums

Gallery

Downloads

Cms(она же Articles/Статьи)

Blogs

Members

Portal

Calendar

Некоторых вкладок у вас может не быть.

Чтобы добавить иконки во вкладки не вошедшие в список или те кто использует Easy Menu, просто ПКМ кликаем по необходимой вкладке -> Посмотреть код элемента и смотрим какой айди/класс используется для данной вкладке.

fontawesome.png

 

Источник https://cyberspace.community/resources/504/

  • Нравится 1


Рекомендованные комментарии

Нет комментариев для отображения

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Гость
Добавить комментарий

×   Вставлено в виде отформатированного текста.   Восстановить форматирование

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...