Jump to content
4.4.3
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.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a Comment

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...