Jump to content
Nathan

IP.Board 4.x Setting Custom Icons in Menu

Recommended Posts

With the addition of the menu manager in IP.Board 4.x updating your menu navigation bar has become a breeze.  One thing they still have not included however, is the ability to set custom fontawesome icons on them.  

The standard IP.Board modules already have good icons set, but if you add external links or install a marketplace application the associated icon doesn't always make sense.  Some don't have one set at all and you're left with the default page icon.

Here's the easiest way to update them using CSS that won't get overridden next time you update your theme.

1. Login to your adminCP and head to your theme settings.  Click the button to "Edit HTML and CSS".

IP.Board Theme Settings.png

2. Once there navigate to the CSS tab and then open the custom.css file.  This is where you will put your new CSS code.

IP.Board Theme Settings - CSS - Custom CSS.png

3. You need to find the identifier of your icon to change, so open up your board index and right click on the icon and select "Inspect Element". You are looking for the parent of your link that is a unique identifier such as a CSS ID.  Mine for example you will see is "elNavSecondary_17".  Copy that text and jump back over to your adminCP area.

IP.Board Element Inspector Custom Navigation Icons.jpg

 

4.  Take a look at fontawesome's website to find the new icon you'd like to use.  Make sure to fine the "Unicode" as we'll need that.

Untitled-4.jpg

5. Now you just need to add the final CSS into your adminCP and you're all set.  Make sure to save!

/* Place your custom css code in this file */

.ipsNavBar_primary #elNavSecondary_17 a:before{
  	content: "\f0e6";
}

IP.Board AdminCP CSS Edits.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×