How to change Menu Icons?

[Aron]

Just purchase this theme. If you have a BuddyPress site: GET BOSS! Its… Well… Boss.

Question: how can I change the icons in front of the BuddyPanel menu?
Thanks in advance guys!
Cheers,
Aron

[Aron]

Answered my own question: https://www.buddyboss.com/tutorials/how-to-add-custom-menus-to-boss-theme/

For all other Boss questions (Tutorials) check: https://www.buddyboss.com/tutorials/
Close it up guys, thanks!

Cheers,
ARon

[Alyssa]

@aronprins Guess you did my job for me 😉 Thanks for posting links, I’m sure it will help other users who stumble upon this thread.

[Ivan]

OK,

And what if I need to change an icon in default mobile BP User Menu? Let’s say I want to replace standard stars icons for BP Following Plugin.

[Alyssa]

@imdyakov add something like this to custom.css

#mobile-item-nav ul li#[id of the menu item]:before{
content: '\f0fb';
}

Here is the cheat sheet of icon options with font awesome: http://fortawesome.github.io/Font-Awesome/cheatsheet/ just change the content last 4 characters

[Ivan]

Thanks for the suggestion although it looks like I still have something wrong in that string.

#mobile-item-nav ul li#[id=”user-members-following”]:before{
content: ‘\f164’;
}

[Alyssa]

@imdyakov this is the valid code:

#mobile-item-nav ul li#user-members-following:before{
content: '\f164';
}

Make sure there are no backticks ` you may need to change them to apostrophes ‘ due to your charset

[Ivan]

Still doesn’t work for me on some reason. I put it into @media screen and (max-width: 720px) section of the Custom CSS of the child. Is that right?

[Ivan]

At the moment I have:

#mobile-item-nav ul li#user-members-following:before{
content: ‘\f0ed’;
}

#mobile-item-nav ul li#user-members-followers:before{
content: ‘\f0ee’;
}

Inside:
@media screen and (max-width: 720px)
and
@media screen and (max-width: 350px)

[Alyssa]

@imdyakov you are using the wrong id you need to look at the li parent not the anchor, this is the correct code:

#mobile-item-nav ul li#members-following-personal-li:before{
content: '\f0ed';
}

Also, you can apply this globally since the mobile-nav is only displayed on mobile devices.

[Ivan]

Right, thanks for helping out with that TJ.

[Alyssa]

NP

[Mehluli]

How can i change icons for the original bb menu items .I see i can change the ones for new pages that i created , however pages that come default like Profile, Notifications friends etc dont seem to allow that option as the CSS option is greyed out as indicated in the picture attached

[Alyssa]

@meza you need to add code to custom.css like this post: https://www.buddyboss.com/support-forums/topic/how-to-change-menu-icons/#post-35999

[Mehluli]

I addedd the code under the global query but still not the css icons menu is still grayed out