Woo commerce star rating edit

Question

First off I apologise for any cringe worthy ignorance, I am a novice.

I'm having some trouble changing the product rating stars to an image of my choice on woo commerce.

I understand woocommerce uses a woff file from the fontawesome pack, I found the plugin.css, located the fontface code for the woff file.

I converted an SVG to a ttf and then to woff and replaced the star woff file with that (keeping the same name to avoid changing code)

But the result is a series of S's.

Totally stuck on this for a few days.

I appreciate any insight.

Thank you

Answer 1

You appear to have replaced the entire font with your new font.

A font is a series of designs (glyphs) associated with different character positions. So a W in Times New Roman looks different to an W in Comic Sans.

Dingbat/icon fonts put arbitrary images in place of letters.

Your new image should be where the S is. As it is not, and there is no character at that position in the font file, your browser will be defaulting to a different font (which, as might be expected, has an S allocated to the S position).

You will probably find that other icons around the site look wrong, because you've swapped out the whole .woff file.

You need to use a font editor that will let you set glyphs in the right place.