How to Change the BuddyPanel Icon and Label Spacing

Introduction

Properly aligning the BuddyPanel icons and label creates a polished, evenly spaced menu for your users. Although there’s no built-in toggle for this in BuddyBoss, a simple CSS tweak will do the trick.

Custom Workaround

1. In your WordPress admin, go to BuddyBoss > Theme Options.
   
2. Under Custom Codes, enable CSS.
   

Append the following CSS:

.buddypanel-menu > li > a > i:not(.bb-icon-angle-down) {

  text-align: center;

  margin: 0;

  min-width: 68px;

}

3. Click Save Changes.
   

Note: Any custom code is considered “custom work.” You may review our Support Policy for details.

Troubleshooting and FAQs

Q: The icons remain misaligned—what should I check?
A: Confirm the CSS is in your active theme’s Custom Codes area (or child theme). Then clear any page- or browser-level caches.

Q: Could this CSS affect other elements?
A: This selector only targets BuddyPanel menu icons. If another part of your site uses the exact same selector, it could be impacted—test accordingly.

Q: I can’t access Theme Options – Custom Codes—what now?
A: Your host may block file editing. Instead, place the CSS in your child theme’s style.css or use a snippet plugin.

Q: How do I revert the alignment changes?
A: Remove the CSS snippet from Custom Codes and save, then purge caches to restore the default layout.