Font-Awesome Icons in The Navbar + Other Places 2014-07-10

[ExpertPixels.com]

ExpertPixels.com submitted a new resource:

Font-Awesome Icons in The Navbar + Other Places - Navigation Icons

What i am going to show you is how to use Font-Awesome Icons within your main XF Navigation bar... This method is the only way ive managed to make this work and i must state ive been out of this Webmaster Game for some time now so this may not be the best solution to achieving this.

​

Full Size Image:...

Read more about this resource...

 

[ExpertPixels.com]

I would like to add that this was the only method that ive found that is indeed more cross-browser compatible than using css3 pseudo methods and ive only posted this to try to assist other XF users, I am not claiming this to be the best method.. simply one that worked for me.

Darren

 

[Gemma]

Thanks. This worked well for me whereas other methods I tried didn't completely work

 

[ExpertPixels.com]

You are very welcome !! As i mentioned tho using the script to target certain div's and classes can be tricky.. it also supports "conditionals" somewhat.. so it can be powerful. Once i get my Expert Pixels project up with a decent style i shall share all my methods and compile and much more detailed guide on this.. So much else can be done but well for now you will need wait.

Darren

 

[teletubbi]

Thanks a lot.
I did your way.

The only problem i have the icons and text stick together. No space between them.
Any solution where i can change it?



As you can see at the forum tab it works because i change directly into navigation.

 

[ExpertPixels.com]

Thanks a lot.
I did your way.

The only problem i have the icons and text stick together. No space between them.
Any solution where i can change it?

View attachment 77845

As you can see at the forum tab it works because i change directly into navigation.

I am sorry i did use some .css in EXTRA.CSS to address this.. PM me you url and i will take a look and provide you the .css but you can try this..

#navigation .fa {
  padding: 0 8px;
}

Again sorry... Was simply posting my method as i noticed a few people struggling.. I will update this resource in a few weeks.. I am also hoping to turn this into a Addon when given some time to suss out what options i can provide.

Darren

 

[teletubbi]

You made my day.
Sometimes you dont see the forest because of the trees.

 

[AshRobboTI]

Having the issues with it being stuck with the text after applying the extra.css also

 

[ExpertPixels.com]

Shoot me a PM with your url i am happy to take a look for you.

 

[jayramfootball]

Hey this is (pardon the pun!) awesome!.Thanks...

 

[ExpertPixels.com]

Hey this is (pardon the pun!) awesome!.Thanks...

View attachment 80554

Very very welcome.. I will be trying to create a addon for this in coming weeks, Just have my hands tied atm while trying to get Expertpixels.com configured / complete ASAP and once done i will be contributing much much more.

Regards, Darren

 

[Brad Padgett]

I just wanted to update this. If anyone uses CTA Featured Threads as a home page and wants the home icon to appear they need to change this:

<script>
$( "<i></i>" )
.before( "<ul></ul>" )
.addClass( "fa fa-home fa-lg" )
.filter( "" )
.attr( "id", "navigation" )
.end()
.prependTo( ".publicTabs .nodetab3 .navLink" );
</script>

To This:

<div class="navimage23">
<script>
$( "<i></i>" )
.before( "<ul></ul>" )
.addClass( "fa fa-home fa-lg" )
.filter( "" )
.attr( "id", "navigation" )
.end()
.prependTo( ".publicTabs .navTab.ctaFt .navLink" );
</script>

Instead of .nodetab3 replace with .navTab.ctaFt

This worked for me. All the other code worked without issue. It just took a workaround like this to get the home icon to work.

Thanks for the information.