Change or replace Font Awesome icon of the Pro badge

[TL99]

I’m trying to change for example the pro badge icon. It seems to be hardcoded, so you need to change the template?

Alternatively I could hide it and use ::before to add another icon via CSS. The problem is that the latter doesn’t seem to work (icon isn’t rendered/available) although the icon is included in the Font Awesome file.

Is there a recommended way?

[kseniia]

Hi,

Please try this CSS snippet and adjust it as needed:

.hp-vendor__pro-badge .hp-icon.fa-shield-alt:before {
	content: "\f0f3"; 
}

Alternatively, you can override the template part using a child theme.

Hope this helps.