Resource icon

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

No permission to download

ExpertPixels.com

Well-known member
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.

xUOBKJB.png

Full Size Image:...

Read more about this resource...
 

ExpertPixels.com

Well-known member
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
 

ExpertPixels.com

Well-known member
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

Well-known member
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?

navi-font.png

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

ExpertPixels.com

Well-known member
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..

Code:
#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
 

Brad Padgett

Well-known member
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:


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

To This:

Code:
<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.
 
Top