How do I change the review ratings from S's in

Question

How do I change the image of the review ratings in WooCommerce from the current 'S' to actual star images?
After a good Google search, i've tried this: Replace theme ratings with WooCommerce stars
But it doesn't work. It just changes the S's to small boxes.

Current CSS:

.woocommerce .star-rating {
    float:right;
    overflow:hidden;
    position:relative;
    height:1em;
    line-height:1;
    font-size:1em;
    width:5.4em;
    font-family: HelveticaNeue-Light, Helvetica Neue Light;
}
.woocommerce .star-rating:before {
    content:"\73\73\73\73\73";
    color:#d3ced2;
    float:left;
    top:0;
    left:0;
    position:absolute;
}
.woocommerce .star-rating span {
    overflow:hidden;
    float:left;
    top:0;
    left:0;
    position:absolute;
    padding-top:1.5em;
}
.woocommerce .star-rating span:before {
    content:"\53\53\53\53\53";
    top:0;
    position:absolute;
    left:0
}

Answer 1

In my case this answer helped me.

I added to style.css of my child theme the next code:

@font-face {
    font-family: 'star';
    src: url('../../plugins/woocommerce/assets/fonts/star.eot');
    src: url('../../plugins/woocommerce/assets/fonts/star.eot?#iefix') format('embedded-opentype'),
        url('../../plugins/woocommerce/assets/fonts/star.woff') format('woff'),
        url('../../plugins/woocommerce/assets/fonts/star.ttf') format('truetype'),
        url('../../plugins/woocommerce/assets/fonts/star.svg#star') format('svg');
    font-weight: normal;
    font-style: normal;
}

Full paths to let you understand better what's going on:

Add code here: /wp-content/themes/gon-child/style.css

Original place where fonts live: /wp-content/plugins/woocommerce/assets/fonts/

Answer 2

Use this in your CSS:

.woocommerce .star-rating span {
   font-family:star;
}