• 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?

#1
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
 

OUTL4W

Active member
#3
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;
}
 
#5
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;
}
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?
 

OUTL4W

Active member
#6
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.