Change BuddyPress navigation menu icons

[Andrei]

This really sounds as a custom task, try to contact the author of the Wishlist plugin or try to find a developer to help you extend the plugin in this direction.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[amonroe]

Thanks, Andrei, for your reply. I will contact Yith and see if that’s something they can help with. No big deal….. I have all of the other icons functioning well and looking great due to the help here in this thread. 🙂

[Abe]

Hi, you need Chrome to inspect the element and follow this tutorial
https://archived.seventhqueen.com/knowledgebase/changing-section-icons-in-profiles-and-groups

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Delta150]

Hello,

I have a questions regarding this. I want to add my own icons (not from fontelo) for my profile tabs and I have the folder with the required files but when I add the files to the assets folder, the icons are not added to the libraries. Are theses new icons supposed to show on the icon elements for easy selection?

[Andrei]

In this case the images have to be manually loaded into the site and some css rules have to be created for them in order to replace the actual icons which are part of a icon-font.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[szmek9]

What If an Icon is in a dropdown menu ?

[szmek9]

ok I think i found sollution I added .tabdrop to code

[timothee]

Hello,

You explained how to change an icon or to add a tab but how do you change the name. I would like to change the name of the tab “friend” into “relations”.

Thank you

[Abe]

Hi, that should be a matter of translating BuddYpress plugin strings

Theme strings and plugins strings can easily be changed by using Loco Translate plugin https://wordpress.org/plugins/loco-translate/

A small introduction on how translations work

Translatable strings can come from the theme or from the installed plugins. You need to translate the theme or the plugin depending on what section of the site your string is found.

For example if your string is on your BuddyPress profile then most probably you will need to translate BuddyPress plugin. If you are on the Forums section of your site then bbPress plugin should be the one that needs to be translated. Another example is the rtMedia plugin that adds the Media links to BuddyPress and if you want to translate it then this plugin will contain the string.

Follow these steps to get you started:

• Install Loco Translate plugin
• Go to the plugin dashboard: WP Admin – Tools – Manage translations
• Find the theme or plugin in the list.
• If the language isn’t already in the list then click Add new language, choose your language and if you are asked where you want to save the language files choose global language directory ( wp-content/languages/ ).
• Press SYNC button to synchronise your translation with the provided .pot file
• Search for the string you want to translate and add your translated string.
• Press Save when you finished your translation.

Note: You will have to set the language for your blog from WP-admin – Settings – General – Site Language – Choose your language

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[ashikai]

Hello!

I’ve been trying to change the icon’s hover color and resize them. However, I cannot figure out what css selector to target. I’ve tried the standard #buddypress div#item-nav ul #blogs-personal-li a:before but that doesn’t change the icon, only the container (and the text). Can you give me some pointers?

(I want to change all of the icons, not just one. I’ve already swapped out the icons I want. 😀 )

Thank you!

[Abe]

Hi, try this selector and make the statements with !important like this example

COPY CODE

#object-nav .responsive-tabs > li a::before {
    color: red!important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[ashikai]

Hi Abe,

That does change the colors of the icons, but I’m not interested in that. What I wanted to change was the HOVER colors for the icons (unless it’s using an alpha channel and it only gets darker on hover because it’s losing transparency…?). I’m also looking for a way to make the icons smaller and the selector you suggested doesn’t allow me to do that, important declaration or no. (see attached for a screen of what happens when I use any of the selectors to resize the icons)

Thank you for helping, but I’m still looking for a solution.

Attachments:

You must be logged in to view attached files.

[Abe]

The selector should be the same but the rule should be like this

COPY CODE

#object-nav .responsive-tabs > li a::before {
    font: 200% "fontello";
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[migued]

Hi there,

I already change the icons but I still need to change the size to make it smaller, can you share how to do this please?

Regards,
Miguel

[Abe]

Hi, my above replies changes the size

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[plymouthvcse]

Hi all,

Sorry to resurrect this thread. I’m banging my head against a brick wall here – I’ve succeeded in changing all other icons instead of this so hopefully someone can shed some light on my issue.

I’ve installed the Buddypress Docs plugin and want to change the icon.

The ID is: nav-docs-groups-li

So I’ve used the following CSS: #buddypress div#item-nav ul #nav-docs-groups-li a:before { content: "\E86E"; }

For some reason it’s not getting to the tag. There must be something I’m missing because this is coming through a plugin which is not making it work – any ideas would be hugely appreciated!

Many thanks,
Chris.

[Author]

Posts