Jump to content
4.4.4
Sign in to follow this  

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


Description

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


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...