Upcoming Theme Called "Up" Is Coming This Year! Read more... ×
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 the setting.

Step 1: Finding the icon that you want

Let's go here to see the full list of icons. After you've gotten one, it's time to copy the 'Unicode' from the icon that you just selected.

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

So, for example:

<a href="http://www.themetree.net/themedocs/" data-navitem-id="85">
  Theme Docs
</a>

You'll only need data-navitem-id, and make sure to copy data-nav-id="#". Replace the hashtag with your 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 so you don't get confused */
.ipsNavBar_primary > ul > li > a[data-navitem-id="ID HERE"]:before {
  content: "\UNICODE HERE";
}

Two things that you only 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. The new changes that you've made will load your custom nav icon into your menu item ID.

Sincerely,

ThemeTree

×