Customize Icon on Member Profile Card

This topic has 5 replies, 2 voices, and was last updated 2 years, 4 months ago by Themosaurus.

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

Author

Posts
lalaine
Participant

11 Topics
22 Posts

Up
0

Is it possible to add an icon like this : https://fontawesome.com/icons/address-book?style=regular

either thru a code snippet? or css?

Thanks

Members-–-The-Swingers-Chateau
October 10, 2018 at 04:21 #2742
Themosaurus
Keymaster
Themosaurus Support

2 Topics
1678 Posts

Hi @lalaine,

Apparently you are using the BuddyPress user circles plugin (https://buddydev.com/plugins/buddycircles/).
Unfortunately, this one is not compatible with Gwangi at the moment.

Therefore We put this ticket as a feature request.

In another time, you can tell us which icon you would like to display for this button.
Then we will send you a CSS snippet while waiting for a possible update for the plugin’s full compatibility.

The list of available icons is only available here: https://fontawesome.com/v4.7.0/icons/

Best regards,
October 10, 2018 at 08:59 #2743
Themosaurus
Keymaster
Themosaurus Support

2 Topics
1678 Posts

Hi @lalaine,

Thank you for your great suggestion. ?

You request has been added to the feature request forum. We will implement the integration with BuddyPress User Circles if other community members upvote this request.

We’ll keep you informed. Thank you very much for contributing to Gwangi!

Best regards,
October 11, 2018 at 11:10 #2761
lalaine
Participant

11 Topics
22 Posts

.circle-button a::before{
content: “”;
color: #4798B6; /* replace with actual code*/
}

I was able to add the same icon for message from inspect element
content: “”; <— how do I change this “icon”

thanks, is this a custom icon or a font awesome icon?

Customize-Members-–-The-Swingers-Chateau
October 12, 2018 at 03:03 #2790
lalaine
Participant

11 Topics
22 Posts

I was able to edit the circle icon holder, adding to custom css, I copied from inspect element the settings icon, editing hex color is straight forward

Is there a list of what content icons are available and how to properly add them

————————- Adding Buddy Circles Icon via css

.circle-button a::before{
content: “”;
color: #FFA20D;
}

————————-

Hope this helps others

Members-–-The-Swingers-Chateau-1 Settings-–-TSC-Admin-–-The-Swingers-Chateau
October 12, 2018 at 04:57 #2792
Themosaurus
Keymaster
Themosaurus Support

2 Topics
1678 Posts

Hi @lalaine,

Thank you for your great contribution. ?
We hope also that this might help others.

You can browse the list of icons included in Gwangi here: https://fontawesome.com/v4.7.0/icons/
To use any icon, simply copy the font unicode and paste it preceded by backslash like following: content: "\f2ba";

Thank you very much for contributing to Gwangi! #Sharingiscaring ❤️

Best regards,

fa-address-book-o-Font-Awesome-Icons
October 12, 2018 at 11:08 #2797
Author

Posts