Jump to content
not community
Sign in to follow this  
alabamaster1337

Menu Navigation Font Awesome icons

Recommended Posts

Иконки FontAwesome для навигации форума
Как сделать Font Awesome иконки меню для форума IPS 4.x

Для начала нужно изменить шаблон в нужном вам стиле
Шаблоны > core > front > global > navBarItems, по стандарту строка 8, в конце перед тегом ">" добавить код

data-FontAwesome="{$item->title()}"

Получится что-то типа такого

<li {{if $active}}class='ipsNavBar_active' data-active{{endif}} id='elNavSecondary_{$item->id}' data-role="navBarItem" data-navApp="{expression="mb_substr( get_class( $item ), 4, mb_strpos( get_class( $item ), '\\', 4 ) - 4 )"}" data-navExt="{expression="mb_substr( get_class( $item ), mb_strrpos( get_class( $item ), '\\' ) + 1 )"}" data-FontAwesome="{$item->title()}">


Теперь меняем CSS
В том же стиле, CSS > core > front > custom > custom.css, вставляем код ниже

Скрытый текст
/* основное меню */
.ipsNavBar_primary > ul > li > a:before,
.ipsNavBar_secondary > li > a:before{
content: "\f00b";
font-family: "FontAwesome";
font-size: 14px;
font-weight: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: -2px;
margin-right: 3px;
opacity: 0.6;
line-height: 1;
}

/* меню пользователя и создать */
#elUserLink_menu a:before,
#elCreateNew_menu a:before{
content: "\f02b";
font-family: "FontAwesome";
font-size: 14px;
font-weight: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: -2px;
line-height: 1;
}

#elUserLink_menu a[href*="admin"] i{
display: none;
}

#elUserLink_menu a:before,
#elCreateNew_menu a:before{
display: inline-block;
width: 22px;
opacity: 0.7;
}

#elUserLink_menu a:hover:before,
#elCreateNew_menu a:hover:before{
opacity: 1;
}

/* добавляем значки на основную панели навигации */
.ipsNavBar_primary > ul > li[data-FontAwesome='Browse'] > a:before{ content: "\f00b" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Store'] > a:before{ content: "\f07a" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Support'] > a:before{ content: "\f1cd" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Forums'] > a:before{ content: "\f086" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Gallery'] > a:before{ content: "\f030" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Downloads'] > a:before{ content: "\f019" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Articles'] > a:before{ content: "\f15c" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Blogs'] > a:before{ content: "\f02d" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Calendar'] > a:before{ content: "\f073" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Chat'] > a:before{ content: "\f27a" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Staff'] > a:before{ content: "\f007" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Users Online'] > a:before{ content: "\f0c0" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Activity'] > a:before{ content: "\f0ac" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Search'] > a:before{ content: "\f002" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Guidelines'] > a:before{ content: "\f0e3" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Tutorials'] > a:before{ content: "\f19d" }

/* добавляем значоки на дополнительную панель навигации */
.ipsNavBar_secondary > li[data-FontAwesome='Browse'] > a:before{ content: "\f00b" }
.ipsNavBar_secondary > li[data-FontAwesome='Store'] > a:before{ content: "\f07a" }
.ipsNavBar_secondary > li[data-FontAwesome='Support'] > a:before{ content: "\f1cd" }
.ipsNavBar_secondary > li[data-FontAwesome='Forums'] > a:before{ content: "\f086" }
.ipsNavBar_secondary > li[data-FontAwesome='Gallery'] > a:before{ content: "\f030" }
.ipsNavBar_secondary > li[data-FontAwesome='Downloads'] > a:before{ content: "\f019" }
.ipsNavBar_secondary > li[data-FontAwesome='Articles'] > a:before{ content: "\f15c" }
.ipsNavBar_secondary > li[data-FontAwesome='Blogs'] > a:before{ content: "\f02d" }
.ipsNavBar_secondary > li[data-FontAwesome='Calendar'] > a:before{ content: "\f073" }
.ipsNavBar_secondary > li[data-FontAwesome='Chat'] > a:before{ content: "\f27a" }
.ipsNavBar_secondary > li[data-FontAwesome='Online Users'] > a:before{ content: "\f0c0" }
.ipsNavBar_secondary > li[data-FontAwesome='Activity'] > a:before{ content: "\f0ac" }
.ipsNavBar_secondary > li[data-FontAwesome='Search'] > a:before{ content: "\f002" }
.ipsNavBar_secondary > li[data-FontAwesome='Todays Activities'] > a:before{ content: "\f06e" }
.ipsNavBar_secondary > li[data-FontAwesome='My Searches'] > a:before{ content: "\f00e" }
.ipsNavBar_secondary > li[data-FontAwesome='Unread Content'] > a:before{ content: "\f111" }
.ipsNavBar_secondary > li[data-FontAwesome='My Created Content'] > a:before{ content: "\f005" }
.ipsNavBar_secondary > li[data-FontAwesome='Guidelines'] > a:before{ content: "\f0e3" }
.ipsNavBar_secondary > li[data-FontAwesome='Tutorials'] > a:before{ content: "\f19d" }
.ipsNavBar_secondary > li[data-FontAwesome='Staff'] > a:before{ content: "\f132" }

/* добавляем иконки на панель пользователя */
/* Profile */
#elUserLink_menu > li[data-menuItem='profile'] > a:before{ content: "\f007" }

/* Attachments */
#elUserLink_menu > li[data-menuItem='attachments'] > a:before{ content: "\f0c6" }

/* Followed Content */
#elUserLink_menu > li[data-menuItem='manageFollowed'] > a:before{ content: "\f1d8" }

/* Administrator Panel */
#elUserLink_menu > li[data-menuItem='content'] > a:before{ content: "\f03a" }

/* Account Configurations */
#elUserLink_menu > li[data-menuItem='settings'] > a:before{ content: "\f013" }

/* Mod Panel */
#elUserLink_menu > li[data-menuItem='modcp'] > a:before{ content: "\f132" }

/* Admin Panel */
#elUserLink_menu > li[data-menuItem='admincp'] > a:before{ content: "\f023" }

/* Logout */
#elUserLink_menu > li[data-menuItem='signout'] > a:before{ content: "\f08b" }

/* Clients */
#elUserLink_menu a[href*="/clients/"]:before{ content: "\f07a" }

/* Edit */
#elUserLink_menu > li[data-menuItem='edit'] > a:before{ content: "\f040" }

/* Ignored Users */
#elUserLink_menu > li[data-menuItem='ignoredUsers'] > a:before{ content: "\f235" }

/* Options */
#elUserLink_menu > li[data-menuItem='options'] > a:before{ content: "\f0ac" }

/* Messages */
#elUserLink_menu > li[data-menuItem='messages'] > a:before{ content: "\f01c" }

/* добавляем иконки в панель создания */
/* значок по умолчанию, который отображается, если вы не добавляете свои */
#elCreateNew_menu a:before{ content: "\f0fe" }

/* Announcement */
#elCreateNew_menu a[href*="/announcements/"]:before{ content: "\f0a1" }

/* Update Status */
#elCreateNew_menu a[href*="module=status"]:before{ content: "\f021" }

/* Member Notes */
#elCreateNew_menu a[href*="module=notes"]:before{ content: "\f14b" }

/* IPS Downloads */
#elCreateNew_menu a[href*="/files/"]:before { content:"\f019" }

/* IPS Gallery */
#elCreateNew_menu a[href*="/gallery/"]:before { content:"\f030" }

/* IPS Blogs */
#elCreateNew_menu a[href*="/blogs/"]:before { content:"\f02d" }

/* Tutorials */
#elCreateNew_menu a[href*="/tutorials/"]:before { content:"\f19d" }

/* IPS Calendar*/
#elCreateNew_menu a[href*="/calendar/"]:before { content:"\f073" }

/* IPS Articles */
#elCreateNew_menu a[href*="/articles"]:before { content:"\f0f6" }

/* Create new topic , I stopped two ways to work if the forum has at the root folder or forum*/
#elCreateNew_menu a[href*="/index.php?/submit/"]:before { content:"\f075" }
#elCreateNew_menu a[href*="/forums/"]:before { content:"\f075" }
#elCreateNew_menu a[href*="/index.php?/submit/"]:before { content:"\f075" }

 


Важное примечание!
Что бы иконки отображались на русском языке форума, переведите их в CSS, как-то так:
Сейчас

.ipsNavBar_secondary > li[data-FontAwesome='Store'] > a:before{ content: "\f07a" }

Будет

.ipsNavBar_secondary > li[data-FontAwesome='Магазин'] > a:before{ content: "\f07a" }


Примеры

Скрытый текст

fa-icons.gif

fa-icons-p.gif


На русском, частично

Скрытый текст
/* Primary Menu */
.ipsNavBar_primary > ul > li > a:before,
.ipsNavBar_secondary > li > a:before{
content: "\f00b";
font-family: "FontAwesome";
font-size: 14px;
font-weight: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: -2px;
margin-right: 3px;
opacity: 0.6;
line-height: 1;
}

/* The User menu and Create */
#elUserLink_menu a:before,
#elCreateNew_menu a:before{
content: "\f02b";
font-family: "FontAwesome";
font-size: 14px;
font-weight: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: -2px;
line-height: 1;
}

#elUserLink_menu a[href*="admin"] i{
display: none;
}

#elUserLink_menu a:before,
#elCreateNew_menu a:before{
display: inline-block;
width: 22px;
opacity: 0.7;
}

#elUserLink_menu a:hover:before,
#elCreateNew_menu a:hover:before{
opacity: 1;
}

/* Add Icon on the primary navigation bar */
.ipsNavBar_primary > ul > li[data-FontAwesome='Browse'] > a:before{ content: "\f00b" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Магазин'] > a:before{ content: "\f07a" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Поддержка'] > a:before{ content: "\f1cd" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Форумы'] > a:before{ content: "\f086" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Галерея'] > a:before{ content: "\f030" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Файлы'] > a:before{ content: "\f019" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Articles'] > a:before{ content: "\f15c" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Блоги'] > a:before{ content: "\f02d" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Календарь'] > a:before{ content: "\f073" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Чат'] > a:before{ content: "\f27a" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Staff'] > a:before{ content: "\f007" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Пользователи в сети'] > a:before{ content: "\f0c0" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Активность'] > a:before{ content: "\f0ac" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Посик'] > a:before{ content: "\f002" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Guidelines'] > a:before{ content: "\f0e3" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Tutorials'] > a:before{ content: "\f19d" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Игровые сервера'] > a:before{ content: "\f11b" }

/* Add Icon on the secondary navigation bar */
.ipsNavBar_secondary > li[data-FontAwesome='Browse'] > a:before{ content: "\f00b" }
.ipsNavBar_secondary > li[data-FontAwesome='Магазин'] > a:before{ content: "\f07a" }
.ipsNavBar_secondary > li[data-FontAwesome='Поддержка'] > a:before{ content: "\f1cd" }
.ipsNavBar_secondary > li[data-FontAwesome='Форумы'] > a:before{ content: "\f086" }
.ipsNavBar_secondary > li[data-FontAwesome='Галерея'] > a:before{ content: "\f030" }
.ipsNavBar_secondary > li[data-FontAwesome='Файлы'] > a:before{ content: "\f019" }
.ipsNavBar_secondary > li[data-FontAwesome='Articles'] > a:before{ content: "\f15c" }
.ipsNavBar_secondary > li[data-FontAwesome='Блоги'] > a:before{ content: "\f02d" }
.ipsNavBar_secondary > li[data-FontAwesome='Календарь'] > a:before{ content: "\f073" }
.ipsNavBar_secondary > li[data-FontAwesome='Чат'] > a:before{ content: "\f27a" }
.ipsNavBar_secondary > li[data-FontAwesome='Пользователи в сети'] > a:before{ content: "\f0c0" }
.ipsNavBar_secondary > li[data-FontAwesome='Активность'] > a:before{ content: "\f0ac" }
.ipsNavBar_secondary > li[data-FontAwesome='Поиск'] > a:before{ content: "\f002" }
.ipsNavBar_secondary > li[data-FontAwesome='Todays Activities'] > a:before{ content: "\f06e" }
.ipsNavBar_secondary > li[data-FontAwesome='My Searches'] > a:before{ content: "\f00e" }
.ipsNavBar_secondary > li[data-FontAwesome='Непрочитанное'] > a:before{ content: "\f111" }
.ipsNavBar_secondary > li[data-FontAwesome='Мои публикации'] > a:before{ content: "\f005" }
.ipsNavBar_secondary > li[data-FontAwesome='Guidelines'] > a:before{ content: "\f0e3" }
.ipsNavBar_secondary > li[data-FontAwesome='Tutorials'] > a:before{ content: "\f19d" }
.ipsNavBar_secondary > li[data-FontAwesome='Staff'] > a:before{ content: "\f132" }
.ipsNavBar_secondary > li[data-FontAwesome='Игровые сервера'] > a:before{ content: "\f11b" }
.ipsNavBar_secondary > li[data-FontAwesome='Вся активность'] > a:before{ content: "\f06d" }
.ipsNavBar_secondary > li[data-FontAwesome='Мои ленты'] > a:before{ content: "\f040" }
/* shop */
.ipsNavBar_secondary > li[data-FontAwesome='Подписки'] > a:before{ content: "\f046" }
.ipsNavBar_secondary > li[data-FontAwesome='Заказы'] > a:before{ content: "\f07a" }
.ipsNavBar_secondary > li[data-FontAwesome='Покупки'] > a:before{ content: "\f1b2" }
.ipsNavBar_secondary > li[data-FontAwesome='Мои данные'] > a:before{ content: "\f022" }

/* Add Icon on the user bar */

/* Profile */
#elUserLink_menu > li[data-menuItem='profile'] > a:before{ content: "\f007" }

/* Attachments */
#elUserLink_menu > li[data-menuItem='attachments'] > a:before{ content: "\f0c6" }

/* Followed Content */
#elUserLink_menu > li[data-menuItem='manageFollowed'] > a:before{ content: "\f1d8" }

/* Administrator Panel */
#elUserLink_menu > li[data-menuItem='content'] > a:before{ content: "\f03a" }

/* Account Configurations */
#elUserLink_menu > li[data-menuItem='settings'] > a:before{ content: "\f013" }

/* Mod Panel */
#elUserLink_menu > li[data-menuItem='modcp'] > a:before{ content: "\f132" }

/* Admin Panel */
#elUserLink_menu > li[data-menuItem='admincp'] > a:before{ content: "\f023" }

/* Logout */
#elUserLink_menu > li[data-menuItem='signout'] > a:before{ content: "\f08b" }

/* Clients */
#elUserLink_menu a[href*="/clients/"]:before{ content: "\f07a" }

/* Edit */
#elUserLink_menu > li[data-menuItem='edit'] > a:before{ content: "\f040" }

/* Ignored Users */
#elUserLink_menu > li[data-menuItem='ignoredUsers'] > a:before{ content: "\f235" }

/* Options */
#elUserLink_menu > li[data-menuItem='options'] > a:before{ content: "\f0ac" }

/* Messages */
#elUserLink_menu > li[data-menuItem='messages'] > a:before{ content: "\f01c" }

/* Add Icon on create bar */

/* Default icon that is displayed if you do not add */
#elCreateNew_menu a:before{ content: "\f0fe" }

/* Announcement */
#elCreateNew_menu a[href*="/announcements/"]:before{ content: "\f0a1" }

/* Update Status */
#elCreateNew_menu a[href*="module=status"]:before{ content: "\f021" }

/* Member Notes */
#elCreateNew_menu a[href*="module=notes"]:before{ content: "\f14b" }

/* IPS Downloads */
#elCreateNew_menu a[href*="/files/"]:before { content:"\f019" }

/* IPS Gallery */
#elCreateNew_menu a[href*="/gallery/"]:before { content:"\f030" }

/* IPS Blogs */
#elCreateNew_menu a[href*="/blogs/"]:before { content:"\f02d" }

/* Tutorials */
#elCreateNew_menu a[href*="/tutorials/"]:before { content:"\f19d" }

/* IPS Calendar*/
#elCreateNew_menu a[href*="/calendar/"]:before { content:"\f073" }

/* IPS Articles */
#elCreateNew_menu a[href*="/articles"]:before { content:"\f0f6" }

/* Create new topic , I stopped two ways to work if the forum has at the root folder or forum*/
#elCreateNew_menu a[href*="/index.php?/submit/"]:before { content:"\f075" }
#elCreateNew_menu a[href*="/forums/"]:before { content:"\f075" }
#elCreateNew_menu a[href*="/index.php?/submit/"]:before { content:"\f075" }

 

Источник invision-virus.com

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   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.

Sign in to follow this  

×
×
  • Create New...