XF 1.5 Add FontAwesome Icons to Navbar?

[rehaM]

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

 

[Lukas W.]

Look here.

 

[OUTL4W]

Try putting this in extra.css for forums tab

.navTabs .navTab.forums .navLink:before
{
  font-family: FontAwesome;
  content: "\f0e6";
  margin-right:3px;
}

For members tab

.navTabs .navTab.members .navLink:before
{
  font-family: FontAwesome;
  content: "\f0c0";
  margin-right:3px;
}

 

[rehaM]

Look here.

Try putting this in extra.css for forums tab

.navTabs .navTab.forums .navLink:before
{
  font-family: FontAwesome;
  content: "\f0e6";
  margin-right:3px;
}

For members tab

.navTabs .navTab.members .navLink:before
{
  font-family: FontAwesome;
  content: "\f0c0";
  margin-right:3px;
}

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

 

[JoshyWalrus]

Try putting this in extra.css for forums tab

.navTabs .navTab.forums .navLink:before
{
  font-family: FontAwesome;
  content: "\f0e6";
  margin-right:3px;
}

For members tab

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

.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

then use the code in red to create the icon.