• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

No permission to download
Navigation Icons

ExpertPixels.com

Well-known member
#1

ExpertPixels.com

Well-known member
#2
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
#4
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
#5
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
#6
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
 
#12
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.