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

XF 1.5 Add FontAwesome Icons to Navbar?

Discussion in 'Styling and Customization Questions' started by Maher Abdallah, Jul 3, 2016.

  1. Maher Abdallah

    Maher Abdallah New Member

    So, I've added FA icons to my custom links, such as a link to my rules, account upgrades, etc.

    I was wondering how would I be able to add an icon before the "Forums" tab, and "Members"? I tried placing the code:
    <i class="fa fa-home" aria-hidden="true"></i>
    in various places, but it always appeared to be incorrect and it would end up at the end of the navbar.

    Is this possible? And if so, where would the code go to appear right before the text?

    Thanks for your help
     
  2. katsulynx

    katsulynx Well-Known Member

  3. OUTL4W

    OUTL4W Active Member

    Try putting this in extra.css for forums tab
    Code:
    .navTabs .navTab.forums .navLink:before
    {
      font-family: FontAwesome;
      content: "\f0e6";
      margin-right:3px;
    }
    
    For members tab
    Code:
    .navTabs .navTab.members .navLink:before
    {
      font-family: FontAwesome;
      content: "\f0c0";
      margin-right:3px;
    }
    
     
    Maher Abdallah likes this.
  4. Maher Abdallah

    Maher Abdallah New Member


    Thank you for the replies, the code for extra.css worked perfectly!
     
  5. JoshyWalrus

    JoshyWalrus New Member

    How to would you set it to a certain Font Awesome icon? If I wanted my Donate buttons to have the icon of a dollar sign, how would I go about of doing this?
     
  6. OUTL4W

    OUTL4W Active Member

    Code:
    .navTabs .navTab.tab_class_name .navLink:before
    {
      font-family: FontAwesome;
      content: "\f155";
      margin-right:3px;
    }
    tab_class_name refers to whatever name is used for the donation tab.
    icons are found here
    upload_2016-7-30_22-43-34.jpeg
    then use the code in red to create the icon.
     

Share This Page