Changing Buddypress Navigation Icon

This topic has 5 replies, 2 voices, and was last updated 9 years by Laura.

Author
November 25, 2015 at 22:23 #89107

raniele
Participant

Hello

I open this ticket as a bug/issue becuase while looking for the information at object, I found in the forum the following link, which seem to be broken:

https://archived.seventhqueen.com/forums/topic/change-buddypress-navigation-menu-icons

Could you please be so kind to restore the thread or maybe provide here a solution?

Thanks in advance for your outstanding support.

November 27, 2015 at 03:44 #89468

Laura
Moderator

Hello, i see you want to change menu icons of buddypress profile?
Can you share with me the new icons that you want to use, i will give you a css code to add to your style.css 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

November 27, 2015 at 13:56 #89522

raniele
Participant

Hi Laura,
Very many thanks for you availability.
Actually I need to change the icons for certain additional component navigation tabs, such as myCred, BuddyFollow and the like, which for the moment are loading Kleo standard “checked circle” icon. Please feel free to use any sample picture name/url for the moment, I am mostly interested in learning how to do it myself.
November 28, 2015 at 19:23 #89815

Laura
Moderator
Hello, you can use this code as an example, is a css code
COPY CODE
```
a#user-activity:before {

    background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/pencil-icon.png');

    background-size: cover;

    display: block;

}

a#user-xprofile:before {

    background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/profle-icon.png');

    background-size: cover;

    display: block;

}

a#user-media:before {

    background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/polaroids-icon.png');

    background-size: cover;

    display: block;

}

a#user-messages:before {

    background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/chat-icon.png');

    background-size: cover;

    display: block;

}

a#user-friends:before {

    background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/smartphone-icon.png');

    background-size: cover;

    display: block;

}

a#user-notifications:before {

    background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/megaphone-icon.png');

    background-size: cover;

    display: block;

}

a#user-members-compliments:before {

    background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/heart-icon.png');

    background-size: cover;

    display: block;

}

a#user-settings:before {

    background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/tools-icon.png');

    background-size: cover;

    display: block;

}
a.dropdown-toggle:before {
   background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/settings-icon.png');

    background-size: cover;

    display: block;

}
ul.responsive-tabs li a:before {
    color: transparent !important;
    width: 50px;
}
```
I do not know the class for followers and follow, or mycred, but you could try
COPY CODE
```
a#user-followers:before {

    background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/genius-icon.png');

    background-size: cover;

    display: block;

}
a#user-following:before {
   background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/genius-icon.png');

    background-size: cover;

    display: block;

}
a#user-mycred:before {
   background-image: url('http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/128/money-icon.png');

    background-size: cover;

    display: block;

}
```
If it doesnt work please share an account so i can see it

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
December 1, 2015 at 17:14 #90337

raniele
Participant

thanks for your reply Laura,
After some testing I’d like to add that the right parameter to modify is not background-image, as doing so would just add another additional icon beneath the existing one.

Rather, it seems the most fruitful approach would be addressing the content: and font-family: parameters, such as:

a#user-following:before{
content:”\a89f” !important;
font-family:”fontello” !important;
}

p.s.: the fontello code in content: is just an example.
December 2, 2015 at 21:23 #90735

Laura
Moderator
Hello, i didnt add the other css sorry, this one will hide the default icons so the images are visible
COPY CODE
```
ul.responsive-tabs li a:before {
    color: rgba(240, 248, 255, 0.05) !important;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘Bugs & Issues’ is closed to new topics and replies.

Search KB

Log in with your credentials

Forgot your details?