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”.
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.
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.
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";
}
Questions or comments? View the forum discussion here.
