Introduction
The default Connection-Request icons on member cards use preset colors. To better match your site’s branding, you can override those colors with a small snippet of custom CSS.
Custom Workaround
- In your WordPress admin, go to BuddyBoss > Theme Options.
- Under Custom Codes, enable CSS.
Append the following code:
.bb-icon-connected,
#buddypress .button-wrap.member-button-wrap .generic-button .friendship-button.not_friends i:before {
color: #009300;
}
.bb-icon-connection-request,
#buddypress .button-wrap.member-button-wrap .generic-button .friendship-button.is_friend i:before {
color: #009dff;
}- Click Save Changes.
Troubleshooting and FAQs
Q: My icons didn’t change color—what can I check?
A: Clear any site- or object-level cache (including CDN), then reload your member directory page.
Q: I’d like different colors—how do I choose new ones?
A: Simply replace #009300 and #009dff with your preferred hex color codes in the CSS snippet.
Q: Other styles are overriding my new colors—how can I ensure mine apply?
A: Increase CSS specificity (e.g., prefix with body) or add !important after each color: declaration.
Q: Can I target only the “Follow” icon or only the “Request” icon?
A: Yes—use just the .bb-icon-connected selector for followers or .bb-icon-connection-request for pending requests in your CSS.
Q: How do I undo these changes?
A: Remove or comment out the CSS code in BuddyBoss > Theme Options > Custom Codes and save; the icons will revert to their defaults.
