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

Unmaintained Font Awesome Navbar Icons before Navigation-Links with CSS 2014-08-19

This guide will teach you how to display icons before Navigation-Links in your Xenforo Navbar.

  1. it_

    it_ Member

  2. UnitySoft

    UnitySoft Member

    Add on :
    XenStaff
    Xenmediagallery
    [Nobita] Team
    ******* - Support Ticket
     
  3. mauzao9

    mauzao9 Well-Known Member

    Thank you for this! I see @Arty provided the codes for this, i'm using Black Responsive works nicely expect for this:
    [​IMG]

    That small black line comes from where? hm
     
  4. oO5 Dynasty

    oO5 Dynasty Active Member

    can you make one that has images only. I would like to remove the text from the nav bar.
     
  5. it_

    it_ Member

  6. it_

    it_ Member

    XenMediaGallery is allready included for the other ressources you just have to find the .class they are using. For example try .xenstaff for XenStaff. If you can't find which .class the addon uses you may contact the specific developer. Please contribute the .class names, if you know them. Thank you.

    Looks like a left border for the image. As you mentioned it I noticed it for me too. A simple line for each .class will remove this:
    Code:
        border-left: none;
    Updated the resource as well.

    You have to edit the templates for this case. See this resource in order to get to know how to do this. The advantage of the CSS editing is that you must not edit templates, disadvantage on the other hand is that you can't remove the titles.
     
  7. oO5 Dynasty

    oO5 Dynasty Active Member

  8. it_

    it_ Member

    Yes, use my CSS first and then try to remove the specific code in the templates for the link. It can be hard to find the right code to remove though.
    However it is also possible to not use my CSS modification and only work with templates see the linked resource for further informations.
     
  9. Carla Birch

    Carla Birch Well-Known Member

    Many thanks for this, just updated my sites menu with it :)

    Screen Shot 2014-08-31 at 18.44.09.png
     
  10. mauzao9

    mauzao9 Well-Known Member

    Hey @it_
    How can we target custom created page / forum nodes that are added to navbar via the Nodes as Tabs addon?
     
  11. MattW

    MattW Well-Known Member

    This is my version:
    upload_2014-9-20_1-41-25.png

    Had to add an extra line into the css to change the colour of the FAicon when the tab is selected and hovered over
    Code:
    /*--icon color if tab is selected--*/
       .navTabs .navTab.shop.selected .navLink:before {color: #ff5857;}
       .navTabs .navTab.shop.selected:hover .navLink:before {color: #ff5857;}
     
  12. it_

    it_ Member

    Hello,
    first you have to get to know the number of the specific node. You can easily find it by navigating to this note in your forum and taking a look on the webadress.

    For example: www.your-domain.com/forums/nodename.8
    Here you would need the number 8.

    Than simply replace the .class with .nodetab8 in your CSS code.

    Best regards
    it_
     
    mauzao9 likes this.
  13. melbo

    melbo Well-Known Member

    Could we use this for secondary links like New Posts?
    What would the .class be?
     
  14. AscalonCZ

    AscalonCZ Member

    Hi, how to add Font Awesome to new tabs in Navbar?

    For example via this mod: Custom Tabs i made new tabs forexamlpe ./pages/games ./pages/translations etc.

    What i need to edit?

    Code:
    .navTabs .publicTabs .navTab .navLink:before
    {
       color: #FFF;
       font-family: FontAwesome;
       font-weight: normal;
       margin-right: 5px;
    }
    .navTabs .navTab.forums .navLink:before
    {
       content: "\f0e6";
    }
     
  15. Kosuki07

    Kosuki07 Member

    For my members link do I type the code like this:

    {
    members: "\f0o6";
    }
    ?
    Same with other sections, like admins, donate and so on.
     
  16. Very useful for me, with some changes i got this:

    [​IMG]

    Thanks(y)
     
  17. ungovernable

    ungovernable Member

    Trying to do this, it worked for first navlink but can't get it to work for "members" navlink... what did i do wrong ?
    screenshot: https://gyazo.com/a61aa5943c25478982542c48ad22e57c
    live website: http://www.libertaire.net/

    my code:

    Code:
    /*=Font Awesome Icon: Forums=*/
    .navTabs .navTab.forums .navLink:before
    {
      display: block !important;
      font-family: FontAwesome;
      position: absolute;
      top: 0 px;
      left: 5px;
      border-left: none;
    /*--icon to display--*/
      content: "\f03a";
    /*--icon color--*/
      color: #FFF;
    /*--icon size--*/
      font-size: 17px;
    }
    /*--icon color if tab is selected--*/
      .navTabs .navTab.forums.selected .navLink:before {color: #FFF;}
    /*--icon color if mouse is hovered--*/
      .navTabs .navTab.forums:hover .navLink:before {color: #FFF;}
    /*--adjust the px relative to the icon size--*/
      .navTabs .navTab.forums .navLink  { padding-left: 28px; }
       
       
       
       
    /*=Font Awesome Icon: Forums=*/
    .navTabs .navTab.members .navLink:before
    {
      display: block !important;
      font-family: FontAwesome;
      position: absolute;
      top: 0 px;
      left: 5px;
      border-left: none;
    /*--icon to display--*/
      content: "\f007";
    /*--icon color--*/
      color: #FFF;
    /*--icon size--*/
      font-size: 17px;
    }
    /*--icon color if tab is selected--*/
      .navTabs .navTab.members.selected .navLink:before {color: #FFF;}
    /*--icon color if mouse is hovered--*/
      .navTabs .navTab.members:hover .navLink:before { color: #FFF;}
    /*--adjust the px relative to the icon size--*/
      .navTabs .navTab.members.navLink  { padding-left: 28px; }
    
     

Share This Page