favorite star changing into heart

[yourateporn]

Hello again.

 

I really want to change the star button into a red heart. When you click on it, it will be dark red. Is this possible?

I find this code:

#buddypress a.button.fav:before, #buddypress a.button.unfav:before, #buddypress a.fav.bp-secondary-action:before, #buddypress a.unfav.bp-secondary-action:before {

  content: “\e84a” !important;

}

But, this is thumbs up. I i put this code in from the link: https://developer.wordpress.org/resource/dashicons/#heart

Then i think the code need to be:

#buddypress a.button.fav:before, #buddypress a.button.unfav:before, #buddypress a.fav.bp-secondary-action:before, #buddypress a.unfav.bp-secondary-action:before {

  content: “\F487” !important;

}

But nothing happens when i use this css.

And i cant change collor to for only the favo button.

Hope some one can help me out 😀

[sharmstr]

Because its using Fontello, not Dashicons. \e80f is a heart

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[yourateporn]

That works, and can i change the collor to?

[sharmstr]

add color:red;

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[yourateporn]

How do i put this in the css code? 🙂

And is the hover color an other color then?

I want the collor of the heart red, and when they add as favorite the collor is dark red

[sharmstr]

Before

COPY CODE

#buddypress a.button.fav:before, #buddypress a.fav.bp-secondary-action:before {
    content: "\e80f";
    color: red;
}

after

COPY CODE

#buddypress a.button.unfav:before, #buddypress a.unfav.bp-secondary-action:before {
    content: "\e80f";
    color: #ca0000;
}

hover

COPY CODE

#buddypress a.button.fav:hover:before, #buddypress a.button.unfav:hover:before, #buddypress a.fav.bp-secondary-action:hover:before, #buddypress a.unfav.bp-secondary-action:hover:before {
    color: green;
}

Change colors to suit your needs

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[yourateporn]

This is beautiful. Thank you so much! 🙂

[Author]

Posts