Why Use Icons in Your BuddyBoss Community?

We provide a growing icon pack for you to use for all your menu options, Set your website’s icons according to your choice.. In the BuddyBoss platform, you have the opportunity to customize every icon style. Let’s see how to optimize it. 

Configure Icons

  1. Go to Appearance - Menus. Here, you will edit the BuddyPannel. Click on My Profile and press the icon.



You can filter the icon with the categories, like I have selected the User & People, and pick the User Avatar icon for My Profile. Change the Icon Style, Box Style, and Icon Size. I keep that default for now. Moreover, you can check the preview. Now click the Select Icon button. 



The Menus dashboard will refresh after that. Again hit the My Profile and watch the difference of the icon. 



Refresh your frontend to ensure the customization is working. 



  1. You can still use the older 1.0 icon set also in your Menus. If you are upgrading from theme 1.0 and want to continue using the icons that you have previously configured the menus. Navigate to the Menus option and click any menu name, for instance My Profile and hit the icon. Go to the Manage option and select BuddyBoss (Legacy) icon packs. Next hit the Load Icon Packs button. 



From now on you can use the older icons. 



  1. Here, in the BuddyBoss Resources site, navigate to Developers - Front Cheatsheet. (Simply go to https://www.buddyboss.com/resources/font-cheatsheet/). From here you can access the helpful cheatsheet, showing all the icons available to use in your code. We called it Font Cheatsheet because technically all the icons load in your theme as Font Family, which is the most modern icon pack on the internet. 



Go into the Inspect of that webpage. 



Navigate to the Activity icon. In HTML, you will use the i element and add these CSS classes into it. The first class references the icon itself (bb-icon-activity), and the second class references the icon style (bb-icon-l). Right now it is bb-icon-l that means it is in the Lined style. 



If you switch the icon to Filled, the style will be bb-icon-f. See the changes in the code as well. 



Now change the shape to Rounded with Filled icon. The style will be bb-icon-rf.



Again if we change the shape to Boxed with Lined icon. The style will be bb-icon-bl.



  1. Let’s see how you can change the icon from the front end. Put your cursor on the element and click right in the mouse to inspect the page. 



Here, you will see the classes. To add some differences click on the + icon and add font-weight: 100; if you want to change the weight then add 200, 300 or more. 



That is how you can customize the icon in BuddyBoss platform. We are trying hard to make the navigation of any customization clearer and easier. Enjoy!

Related Materials 

The All New BuddyBoss 2.0 Icon Pack