Any way to add a facebook icon in the nav bar?

[StephenKay]

I'd like to put a facebook Icon in the nav bar to link to our facebook page. I found this old thread from VB4 which suggested you could do it by putting this code in the title, of the nav bar item, instead of text - but it doesn't seem to work:

https://www.vbulletin.com/forum/forum/vbulletin-4/vbulletin-4-questions-problems-and-troubleshooting/4373519-use-icon-or-image-instead-of-text-in-navigation-manager-link

Instead of entering the text in the title box, you can enter

<img src="images/facebook.png">

Any way to do this in VB 5?

[In Omnibus]

Add the Facebook link to the Navigation Bar or Sub-Navigation Bar.

Search for "Facebook" in phrases in the Navigation Bar

Edit the phrase replacement text with the link. i.e. <img src="images/misc/facebook.png">

Save

[Wayne Luke]

Note that due to a bug, every time you change the Navigation Bar through Site Builder, the < and > will be replaced with &lt; and &gt; respectively. You'll have to edit and save the phrase (which is untouched by the bug) to restore proper HTML.

A better solution is added below.

[Mark.B]

Just as an aside...with vB5, there is no point looking at anything for vB4, as the two products are completely different. Pretty much nothing from vB4 templates will work in vB5 templates.

[delicjous]

This could also be an option : https://vbulletin-forum.de/forum/eng...ain-navigation

[Wayne Luke]

The recommended method of doing this would be to use Template Hooks.

1. Log into the AdminCP.
2. Go to Styles -> Style Manager.
3. Select "Add New Template" from the All Style Options for your style.
4. Name it "header_tabbar_facebook"
5. Enter your code.
6. Save the template.
7. Go to Products & Hooks -> Manage Template Hooks.
8. Click Add New Hook at the bottom.
9. Set the hook location to header_tabbar.
10. Set Active to "Yes"
11. Give it a name like "Facebook Button"
12. Enter the template name you created "header_tabbar_facebook"
13. Save your new hook.

Reload the front page and your button should be available in your current style. Add the template to every style you have available to your users.

[StephenKay]

Awesome! thank you for that!

[StephenKay]

It works great - just need to use some CSS and a little tweaking to position it correctly. What I used for the template code was (in order to make it a tab like everything else):

<li class=" section-item js-shrink-event-child">
    <a class="h-left navbar_facebook" href="https://www.facebook.com/LINK" target="_blank"><img src="/images/icons/facebook-20px.png"></a>
</li>

And then in the CSS:

/* facebook icon */
.navbar_facebook{
    padding:0px 12px 0px 12px !important;
}

YouTube icon coming next!