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

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

Navigation Icons

  1. ExpertPixels.com

    ExpertPixels.com Well-Known Member

    ExpertPixels.com submitted a new resource:

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

    Read more about this resource...
     
  2. ExpertPixels.com

    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
     
  3. Gemma

    Gemma Well-Known Member

    Thanks. This worked well for me whereas other methods I tried didn't completely work :)
     
    ExpertPixels.com likes this.
  4. ExpertPixels.com

    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
     
  5. teletubbi

    teletubbi Active 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 likes this.
  6. ExpertPixels.com

    ExpertPixels.com Well-Known Member

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

    teletubbi Active Member

    You made my day.
    Sometimes you dont see the forest because of the trees. :whistle:
     
  8. AshRobboTI

    AshRobboTI Member

    Having the issues with it being stuck with the text after applying the extra.css also
     
    ExpertPixels.com likes this.
  9. ExpertPixels.com

    ExpertPixels.com Well-Known Member

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

    jayramfootball Active Member

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

    Screen Shot 2014-08-14 at 14.52.29.png
     
    ExpertPixels.com likes this.
  11. ExpertPixels.com

    ExpertPixels.com Well-Known Member

    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
     
  12. TheXboxCloud

    TheXboxCloud Active 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.
     

Share This Page