Перейти к содержимому

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


Описание

Добавляем иконки 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/


 Сообщить об этой статье


0 комментариев

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

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
×