Docs

Documentation

Get started by browsing the docs below to pinpoint what you're looking for.

Adding your own FA icon through nav icons

In this tutorial you'll learn how to input your own navigation icon (Font Awesome) when you enable navigation icons through the setting page.

Note: This tutorial only applies to the themes that have navigation icons enabled.

Step 1: Finding the icon you want

Go here to see the full list of icons. After you've selected one, it's time to copy the 'Unicode' from the icon.

Step 2: Getting the menu name and inputting it into the custom CSS file

To find the menu name, you'll have to hover over the navigation and right click on your mouse and click "Inspect" or F12. Make sure you've selected the <a> tag on your inspect element window because that's where we gonna pull the ID from a specific item menu.

So, for example:

<a href="https://www.themetree.net/themes" data-navitem-id="85">
  Themes
</a>

You'll only need data-navitem-id, and make sure to copy data-nav-id="#". Replace the hashtag with your ID number.

Step 3: Making it live

Login to your ACP and go to Customization -> Themes. Then, click the first icon (</>), and then select the 'CSS' tab. After that, load the 'custom.css' file.

Paste this code inside the file:

/* 
	Name the nav if you want.
	e.g. Forums
*/
.ipsNavBar_primary > ul > li a[data-navitem-id="ID HERE"]:before {
  content: "\UNICODE HERE";
}

Two things that you need to change:

  1. ID HERE
  2. UNICODE HERE

I have explained this on Step 1 and Step 2 so you'll know what to do after that.

After you're done, click the "Save" button and refresh your site.

Sincerely,

ThemeTree

Edited by Brian A.

×