Създаване на красиво меню. Списък с иконките и кодовете за тях тук: http://astronautweb.co/snippet/font-awesome/
- За 4.0.x
Customization> Themes> see what your skin and click the icon <> and click CSS> CORE> FRONT> CUSTOM> custom.css
Добавете това:
#ipsLayout_mainNav a:before, #elNavMore_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; {prefix="transform" value="translate(0,0)"} } html[dir="rtl"] #ipsLayout_mainNav a:before{ margin-right: 0; margin-left: 3px; } #ipsLayout_mainNav a:before{ margin-right: 3px; opacity: 0.6; } #ipsLayout_mainNav a:hover:before, #ipsLayout_mainNav a.ipsNavActive:before{ opacity: 1; } #ipsLayout_mainNav a[id*="elNavigation_app_downloads"]:before{ content: "\f0ed" } #ipsLayout_mainNav a[id*="elNavigation_app_gallery"]:before{ content: "\f03e" } #ipsLayout_mainNav a[class*="nexus_Store"]:before{ content: "\f07a" } #ipsLayout_mainNav a[class*="nexus_Support"]:before{ content: "\f1cd" } #ipsLayout_mainNav a[class*="blog"]:before { content: "\f02d" } #ipsLayout_mainNav a[id*="elNavigation_app_calendar"]:before{ content: "\f073" } #ipsLayout_mainNav a[class*="cms"]:before{ content: "\f0f6" } #ipsLayout_mainNav a[id*="elNavigation_app_forums"]:before{ content: "\f086" } #ipsLayout_mainNav a[class*="core_Core"]:before{ content: "\f015" } #ipsLayout_mainNav a[class*="chat"]:before{ content: "\f022" } #ipsLayout_mainNav a#elNavigationMore_dropdown:before{ content: "\f0fe"; display: none; } #ipsLayout_mainNav .fa-caret-down{ font-size: 12px; }
2. За 4.1.x
Templates -> Core -> front -> global ->navBarItems and find
Заменете го с:
Добавяте само това – data-FontAwesome=”{$item->title()}” в края. Запазете промените.
Сега в CSS -> Core -> custom.css добавете:
/* 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=’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” }
/* Add Icon on the secondary navigation bar */
.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” }
/* 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″ }