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...
 
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
 
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
 
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.webp

As you can see at the forum tab it works because i change directly into navigation.
 
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
 
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 Bottom