Jump to content

IP.Board 4.x Setting Custom Icons in Menu

Recommended Posts

  • Administrators

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.


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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...