Add Icons to Buddypress Nav Menu Tabs

Adding icons to your membership site would make it more attractive and eye-catching. Unfortunately, BuddyPress does not offer such feature neither anyone of the plugins dealing with icons.

in this tutorial we will cover how to add this icons to your Nav Menu Tabs with some simple CSS tricks.

Let’s begin.

Step 1:

Right click on the tab you which you would like to add the icon and inspect it in the developer mode. Note its id.
In this example above we will add an icon before the Activity Tab.
 id using activity icon

Step 2: 

Now go to the theme editor and add the icon you want using before selector. For example, let’s say you like to add the dashicons-editor-alignleft to the Activity Tab. Simply add this code:
#activity-personal-li:before
{content:”\f206″;
font-family: dashicons;
text-decoration: inherit;
font-weight: 400;
font-style: normal;
vertical-align: top;
text-align: center;}

This is what we will obtain:

first result icon tab buddypress
Other great resources for icons:


Step 3:

Adjust the alignement using some css coding. In our case we will add to the item list element:

#buddypress div.item-list-tabs ul li a, #buddypress div.item-list-tabs ul li span
{margin-top:-30px;
margin-left:10px;}

second result icon tab buddypress

Step 4:

Repeat the process for the rest of the item tabs.

Step 5:

Enjoy you iconized buddypress nav menu tabs !

Nav Menu Tab Buddypress Icons