Change the listing featured badge icon

[MHicks]

I’m using this css code to change the featured badge icon next to the listing name to a star (from Line Awesome) but it isn’t working. What am I doing wrong?

.hp-vendor__featured-badge::before {
	content: "\" !important;
}

Thanks!

[andrii]

Hi,

Please note that the CSS snippet you provided will not change the feature listing badge, as the CSS class you are using is for the vendor feature badge. Please use this CSS snippet:

.hp-listing--view-block .hp-listing__featured-badge i::before {
    content: '\f005';
}

[MHicks]

Excellent! Thank you. Can the icon only appear within a circle? What I have is the star that I wanted but it’s a star in a circle rather than only the star.

Also, what controls the colors?

[andrii]

Hi,

Most likely, you have specified the color for this block using CSS, I recommend checking your customizations in more detail. Also, you can choose any other icon at this link Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

[MHicks]

These two colors are my theme primary and secondary colors but they don’t look particularly good on top of one another in the icon. Is there a way to override them with css code?

[andrii]

Hi,

Please check the solution in this topic Change Icon colour in feature job listing - #3 by andrii

[MHicks]

Perfect! Thank you.