Changing Buddypress Navigation Icon

[raniele]

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.

[Laura]

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 🙂

[raniele]

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.

[Laura]

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 🙂

[raniele]

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.

[Laura]

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