Navbar / Navtab Icons ?

[ExpertPixels.com]

Hey all,

Id love to see the ability to add icons albeit (Font-Awesome ones or Custom ones) being added next to each of the Navtabs.. Now i have found a way to make this happen but without much knowledge of XF Addon's i don't this many people will be able to wrap their heads around how i do it.

Id love to see a better XF Navtab System that allowed admins more control over the Tabs / Tabs Options... I recall paying like $15 or something for a old IPB addon that basically gave the site owners much better control over their navbar and tabs, but to see a option like this out of the box would be a huge boost for XF.

This is my Tutorial / Guide: http://xenforo.com/community/resources/font-awesome-icons-in-the-navbar-other-places.3403/

Now it's simple'ish if your comfortable within XF templates and JS but i feel a simple addon would make life easier for everyone.

If someone could help me make an addon to use my method i am sure many people would be very grateful.

Regards, Darren

 

[tajhay]

@*******'s Menu Manager addon already allows this, as well as even creating 3 level menus.

 

[Russ]

Just my own method for it, it's pretty easy with just CSS:

.navTabs .publicTabs .navTab .navLink:before
{
   color: #FFF;
   font-family: FontAwesome;
   font-weight: normal;
   margin-right: 5px;
}
.navTabs .navTab.home .navLink:before
{
   content: "\f015";
}
.navTabs .navTab.forums .navLink:before
{
   content: "\f0e6";
}
.navTabs .navTab.resources .navLink:before
{
   content: "\f008";
}
.navTabs .navTab.members .navLink:before
{
   content: "\f0c0";
}

Easy for folks to add new tabs using the specific selector too.

 

[ExpertPixels.com]

Thanks for that method I am open to all options.. The Method above however i received a bit of flack over (As to I did using JS script injection) You can't please everyone but would like to please the majority if possible... I know IE (Internet Explorer + Other older browsers) are not all that kind to css pseudo elements.

As i was also implementing other scripts (for commercial releases) such as having certain sections fade in and out as you scroll.. now not wanting to have all the other designers steal our code i was going to create on simple .js file to include at the end that would contain all my custom scripts and have it compressed.

My main goal is to have a not so much framework but a page with the Styles settings so that they could turn on & off what they liked.. so using the append / pre-pend scripts as ive done i figured having everything in the one file may of been easier for the end users.

Thanks again Russ i do appreciate it and will further investigate your option.

Regards, Darren

 

[ExpertPixels.com]

@*******'s Menu Manager addon already allows this, as well as even creating 3 level menus.

Thanks for letting me know, Like ive said i was away from XF for a while.. Would you like me to request this to be removed ? I am sorry tho the last time i searched for such a thing it was not available (Otherwise id probably had used it myself lol).

I also try to rely on as little 3rd party addons as possible due to the fact most webmasters / coders burn themselves out and abandon their work leaving many people who relied on their addons / scripts / code in a spot of bother.

Thank you for bringing that to my attention tho, I shall take a look at it later today.

Regards, Darren

 

[CarpCharacin]

Just my own method for it, it's pretty easy with just CSS:

.navTabs .publicTabs .navTab .navLink:before
{
   color: #FFF;
   font-family: FontAwesome;
   font-weight: normal;
   margin-right: 5px;
}
.navTabs .navTab.home .navLink:before
{
   content: "\f015";
}
.navTabs .navTab.forums .navLink:before
{
   content: "\f0e6";
}
.navTabs .navTab.resources .navLink:before
{
   content: "\f008";
}
.navTabs .navTab.members .navLink:before
{
   content: "\f0c0";
}

Easy for folks to add new tabs using the specific selector too.

I added that on my site, but it gets hidden when the menu is open.

 

[Dadparvar]

I added that on my site, but it gets hidden when the menu is open.

its not getting hidden. Your menu becomes white and that icon's color is set to white too. this is why you don't see it.

remove this part from the code and test it:

color: #FFF;

 

[CarpCharacin]

Thanks. That worked.
This is the code I have now:

.navTabs .publicTabs .navTab .navLink:before
{
   font-family: FontAwesome;
   font-weight: normal;
   margin-right: 5px;
}
.navTabs .navTab.home .navLink:before
{
   content: "\f015";
}
.navTabs .navTab.forums .navLink:before
{
   content: "\f0e6";
}
.navTabs .navTab.showcase .navLink:before
{
   content: "\f07c";
}
.navTabs .navTab.members .navLink:before
{
   content: "\f0c0";
}