Change BuddyPress navigation menu icons

[Abe]

Hi, This topic will show you how to replace the defined icons for the existing menu items. See the attached screenshot with the referred icons

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

Attachments:

You must be logged in to view attached files.

[Abe]

Fist thing, Kleo uses Fontello for Vector icons.

To see the icons that are included follow the next steps:
1. Go to http://fontello.com/
2. Click on the litte tool icon at top and Import
3. Go to the theme main downloaded package from Themeforest in Assets/Fontello and select the font-icons.json
4. Now you’ll see all the icons that are available with a rounded border.

All the icons are added by CSS, so you need to add some CSS rules to change the default icons defined by us.
This is the default CSS for the icons:

COPY CODE

#buddypress div#item-nav ul #activity-personal-li a:before,
#buddypress div#item-nav ul #home-groups-li a:before {
	content: "\e8ed";
}
#buddypress div#item-nav ul #xprofile-personal-li a:before {
	content: "\e98e";
}
#buddypress div#item-nav ul #notifications-personal-li a:before {
	content: "\e863";
}
#buddypress div#item-nav ul #messages-personal-li a:before {
	content: "\e98c";
}
#buddypress div#item-nav ul #friends-personal-li a:before {
	content: "\e98f";
}
#buddypress div#item-nav ul #groups-personal-li a:before {
	content: "\e995";
}
#buddypress div#item-nav ul #forums-personal-li a:before,
#buddypress div#item-nav ul #nav-forum-groups-li a:before {
	content: "\e97b";
}
#buddypress div#item-nav ul #buddydrive-personal-li a:before,
#buddypress div#item-nav ul #nav-buddydrive-groups-li a:before {
	content: "\e8d7";
}
#buddypress div#item-nav ul #media-personal-li a:before,
#buddypress div#item-nav ul #rtmedia-media-nav-groups-li a:before {
	content: "\e8c5";
}
#buddypress div#item-nav ul #settings-personal-li a:before,
#buddypress div#item-nav ul #admin-groups-li a:before {
	content: "\e98b";
}
#buddypress div#item-nav ul li.dropdown a:before {
	content: "\e97c";
}
#buddypress div#item-nav ul #members-groups-li a:before {
	content: "\e995";
}
#buddypress div#item-nav ul #invite-groups-li a:before {
	content: "\e991";
}
#buddypress div#item-nav ul #achievements-personal-li a:before {
	content: "\e996";
}
#buddypress div#item-nav ul #blogs-personal-li a:before {
	content: "\e802";
}
#buddypress div#item-nav ul #articles-personal-li a:before {
	content: "\e870";
}

To override an icon, lets say the Activity icon:
– we identify it from list above and copy the code
– go to Fontello and get the code for your new icon by going to the Customize codes tab
– change the copied text with the new value
– add this CSS to your child theme/style.css
Example to replace the Activity icon with a heart icon:

COPY CODE

#buddypress div#item-nav ul #activity-personal-li a:before {
	content: "\E80F";
}

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

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

[Abe]

To add icons to new items added by plugins you need to inspect the element using Chrome browser, get the ID of the specific list item and follow the above example.

Example to add for Buddypress Follow plugin that adds two new navigation items, Followers and Following

/* Following icon */
#buddypress div#item-nav ul #members-following-personal-li a:before {
    content: "\E98F";
}
/* Followers icon */
#buddypress div#item-nav ul #members-followers-personal-li a:before {
    content: "\E995";
}

 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.

[Pedroml]

Very useful thanks 🙂

[Pedroml]

I saw your screenshot and inactive icons are light gray.
In my page they are transparent, maybe I modified the style without realizing it.

What property controls that?

Attachments:

You must be logged in to view attached files.

[Abe]

They should be like in the my first attached screenshot. It could be related to Chrome. If you hove the mouse over, they become visible?

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.

[Abe]

To change those icon colors this is the CSS:

COPY CODE

.main-color #buddypress div#item-nav ul li a:before, .main-color #buddypress div#item-nav .tabdrop .dropdown-menu li a:before {
    color: #E5E5E5;
}

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.

[Pedroml]

Yes, on mouse over they become visible.

I tried in chrome and Opera and is the same, even after adding the CSS code.

[Abe]

And they remain visible after you no longer hover ?

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.

[Pedroml]

The active icon is correct.

Inactive icons are displayed on mouse over only.

The problem I think is that the color of the inactive icons is white, but I dont know where it modifies.

[Pedroml]

The problem of transparent inactive icons is not solved, here’s the link to check for solution.

Thanks. http://terapianatur.com/miembros/dddfd/

[Abe]

Check Theme options – Styling options – Main section – Alternate border. If you set it to white then that is the problem

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.

[Pedroml]

Perfect!

The border color and the background color was white, now changed to default and it looks correct.

Thank you very much 🙂

[natiugango]

Thanks for the advice to change the color of the icon.
But how to change the color settings for the selected item and for the hover effect?

K.

[russellkhan]

just wondering if there is anyway i can have smaller icon size than what we have default set. I want to keep the same icon which is available out of the box but want to have smaller size.

[lemonjoe]

Hey, how can I insert png-icons instead of fontello?

Thank you very much!

[jiant]

Please help, I´m not pro, and also I can´t undertand perfectly the english language.

The question is : (Really I readed all you wrote above of this topic,but can´t understand)

I want to a new items appered in the navmenu , but not in desplegable menu wich is situaded at the rigth of the nav-menu.(made with custom menu)

I want the items appeared with a new icom.

Please be specific where I have to put the codes. (this is the more difficult par for me)

Thank so much.

[Andrei]

@russellkhan , you can achieve that by adding “font-size” property to the same exemplified css rules given above.

@lemonjoe , you can do that by customizing the same exemplified css rules given above, and you should add them as backgrounds, and set content=””

In both cases css knowledge is needed

@jiant , firstly you will need programming skills to add/remove profile menu items, there are some tutorials over the internet to do so but is nothing easy, maybe try to find a plugin to help you do that, and secondly the dropdown menu only appears when you don’t have enough space to show all menu items.

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

[Shakinaz]

Thanks devs for the info..
& please provide me a code to change the color of the current selected icon.

[Andrei]

It’s basic css, inside the css rule you have to add:

color: blue;

Cheers

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

[marcogovoni]

Hi! I have a problem: in my member page there isn’t the icon for “article”. What I have to do?
Second, is it possible to toggle off some icons/options on the member page?
Third, is it possible to add a icon/option (and a content!) to the member page?

thank you
marco

[Andrei]

The “article” tab is added by the “Social Articles” plugin, so please be sure you have it installed and configured.
You can remove profile tabs by deactivating some of the buddypress components or implementations.
Yes you can add an additional page and menu item but you’ll need programming skills to apply and modify some code snippets.

Cheers

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

[labdesignbrasil]

Hello!

Im missing the “sites” tab, where to find it or hoe to add it without installing “another plugin”? already downloaded BuddyPress Custom Profile Menu, but if I can avoid it the better, plus…checked your demo sites and “sites” is included.
Any feedback will be much appreciated
Tks

[Abe]

Hi, “Sites” menu appears only when you have WordPress multisite enabled and from Admin settings you enable registration and blogs creation

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.

[carolina marques]

Hi, uma pergunta: o mesmo se aplica com o ícone de favorito que aparece na atividade? Eu queria substituir este icone estrela-vazia por um icone thumbs-up. Como faço?

[carolina marques]

Sorry , I write in Portuguese unintentionally…

Hi, a question: the same applies with the favorite icon that appears in the activity? I wanted to replace this star-empty icon for a thumbs-up icon. How do I?

[Andrei]

Hi,

Please put this code in your theme child style.css file or in wp-admin, under Theme Options > General Settings > Quick Css

COPY CODE

#buddypress a.button.fav::before, #buddypress a.fav.bp-secondary-action::before {
    content: "\e848";
}
#buddypress a.button.unfav::before, #buddypress a.unfav.bp-secondary-action::before {
    content: "\e84a";
}

Cheers

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

[Abracadabra]

2. I dont see little tool icon at top to import. Do you mean download webfont?
3. There is no font-icons.json file in Assets/Fontello/Font, there is a file called config.json. I cant open it properly, when I open it with wordpad its a bunch of text.

Perhaps Im doing something wrong, but I followed your steps as outlined.

I want to switch my media icon to (pictures) icon, to the one in the attachment, could you tell me what the identifier is for that circled icon please?

Attachments:

You must be logged in to view attached files.

[Abracadabra]

I was able to identify which icons I want, but these codes shown do not work.

Attachments:

You must be logged in to view attached files.

[carolina marques]

I was also looking through the web http://www.fontello.com, but not so.

@Abracadabra look inside your download folder Kleo “themes-kleo-version \ 2.4.3 \ Assets \ Fontello \ demo.html” open and select the icon of your preference. With the mouse over you can see the code.

[Abracadabra]

Great thanks Carolina.

[NEILBATCHELOR]

hi sorry to resurrect this but I can’t follow the post

I would like to:

– change the fontello icons in the buddypress profile bar
– change the colour in v3.01

can you add this option to the theme options becauses its messy hunting around for css and json files

can you give exact paths please so I know which files to edit,

how can I retain the edits on theme update please?

really appreciate it

[Andrei]

Hi,

We’ll add a profile menu configurator for sure in one of our future updates.
This topic contains all the details needed in order to change the icons, you just have to read it carefully.
For update compatibility you should have the child theme installed and activated and this css rules should be added into the style.css file of the child theme.

Cheers

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

[Abe]

Please take a look at this also https://archived.seventhqueen.com/kb/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. Ticket solution

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

[NEILBATCHELOR]

This reply has been set as private.

[Andrei]

Hi,

You’ll have to give me some screenshots to point out the exact elements for which you want to change their color.
Regarding importing other icons, please give a look at this section from our docs:
https://archived.seventhqueen.com/documentation/kleo#vector-icons

Cheers

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

[NEILBATCHELOR]

This reply has been set as private.

[pogang]

This reply has been set as private.

[Andrei]

Hi @pogang,

Firstly please give a look at our install video tutorial over here: https://www.youtube.com/watch?v=e1fLpukxW5s
Secondly, you can buy this service over here for the theme installation, and after that if you still need help we’ll talk separately about the costs. https://archived.seventhqueen.com/services/wordpress-theme-installation-service

Cheers

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

[amonroe]

Hello,
I would like to know if there is a way to add an icon for the member’s Yith Wishlist to the bp profile bar. I’ve looked into this, but my attempts at adding a #nav…. have been unsuccessful.
Thank you!

[Author]

Posts