XF 1.5 Add FontAwesome Icons to Navbar?

rehaM

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
 
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;
}
 
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?
 
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.webp
then use the code in red to create the icon.
 
Back
Top Bottom