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

XF 1.4 Font Awesome in navbar

Discussion in 'Styling and Customization Questions' started by AscalonCZ, Apr 21, 2015.

  1. 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";
    }
     
  2. Dylan V

    Dylan V Well-Known Member

    Hi,

    The following method does not necessarily assign an unique id to custom tabs, but also do not touch the HTML code. Replace your current code with mine:
    Code:
    .navTabs .publicTabs .navTab .navLink:before
    {
          color: #FFF;
          font-family: FontAwesome;
          font-weight: normal;
          margin-right: 5px;
    }
    
    .navTabs .publicTabs .navTab:nth-child(2) .navLink:before
    {
          content: "\f0e6";
    }
    The number in "nth-child(2)" matches the tab located in the second position of your navigation.

    Example in image:

    Screenshot_1.png

    If I want, for example, to add an icon to the tab "Test #2", I'll add this:
    Code:
    .navTabs .publicTabs .navTab:nth-child(5) .navLink:before
    {
          content: "\f0e6";
    }
    This tab is in fifth position, so I put "5".

    Screenshot_2.png
     
    Russ and AscalonCZ like this.
  3. AscalonCZ

    AscalonCZ Member

    Excellent, it works! Thank you very much for your help. :)
     
  4. Russ

    Russ Well-Known Member

    While the above css is using nth-child(#), if you change the order at all, add or remove links it would link those icons to different ones.

    So to kind of "future proof" it:

    That add-on adds classes to each tab: custom-tab-1, custom-tab-2 ect. You can use this to target specific ones:

    Code:
    .navTabs .publicTabs .navTab .navLink:before
    {
      color: #FFF;
      font-family: FontAwesome;
      font-weight: normal;
      margin-right: 5px;
    }
    .navTabs .navTab.home .navLink:before {  content: "\f015"; }
    .navTabs .navTab.forums .navLink:before {  content: "\f0e6"; }
    .navTabs .navTab.resources .navLink:before {  content: "\f008"; }
    .navTabs .navTab.members .navLink:before {  content: "\f0c0"; }
    .navTabs .navTab.custom-tab-2 .navLink:before {  content: "\f0c0"; }
    .navTabs .navTab.custom-tab-3 .navLink:before {  content: "\f0c0"; }
    
     
    AscalonCZ, Demon and Dylan V like this.

Share This Page