Icons in menu items

I'd like to replace some menu items with icons. Where should I look and how should I go about it?

For example: On the Author page:
ACTIVITY
PROFILE
NOTIFICATIONS
MESSAGES
FRIENDS
GROUPS
FORUMS
SEND INVITES
MEDIA
SETTINGS

and/or

PERSONAL
MENTIONS
FAVORITES
FRIENDS
GROUPS

Thanks!

Hi,

You have to use Firebug or Google Dev tools to inspect these elements and find id of your menu items, i.e. for the Activity you can use this code:

Code: Select all

#buddypress div.item-list-tabs ul #activity-personal-li {
   background: ...
   text-indent: -999px;
}


text-indent for hiding the text, and you can add background to this menu item.

You can also use pseudelements :before to add your FontAwesome or other icons, more information may be found here:
https://www.gavick.com/blog/add-use-font-awesome-icons