Change Header Message and Bell Icons

Introduction

BuddyBoss does not provide a built-in option to change the Message and Bell icons in the header. However, you can customize these icons by updating their Unicode values using a simple CSS snippet. This allows you to match your site’s branding or design preferences while controlling the Header Message Bell Icons displayed in the header.

Custom Workaround

1. In your WordPress admin, go to Appearance > Customize
   • Or if the WP admin toolbar is visible on the front end, click Customize directly
2. Go to Additional CSS
3. Paste the following CSS:

.bb-icon-inbox:before {

  content: 'ee62';

}

.bb-icon-bell:before {

  content: 'edc7';

}

Note: Change the Unicode values (ee62 and edc7) to the icons you want. You can find available icon Unicode values here: BuddyBoss Font Cheatsheet

4. Click Save or Publish

Any custom code is considered “custom work.” Please review our Support Policy for more details.

Troubleshooting and FAQs

Q: The icons did not change, what should I check?

A: Make sure the CSS was added in Appearance > Customize > Additional CSS. Adding it in BuddyBoss Theme Options will not work. Also, clear your site cache or CDN cache

Q: Can I use different icons?

A: Yes. Replace the Unicode values in the CSS with the ones for the icons you prefer

Q: Will this affect other icons on the site?

A: No. This CSS specifically targets the Message (inbox) and Bell icons in the headerQ: Who can I contact for further assistance?

A: Submit a support ticket through your BuddyBoss account dashboard for personalized help.