Wie ändere ich die Bewertungsbewertungen von S in WooCommerce?

Wie ändere ich das Bild der Bewertungsbewertungen in WooCommerce vom aktuellen „S“ in tatsächliche Sternbilder?
Nach einer guten Google-Suche habe ich dies versucht: Ersetzen Sie Themenbewertungen durch WooCommerce-Sterne

Aber es funktioniert nicht. Es ändert nur die S in kleine Kästchen.

Aktuelles 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
}

Verwenden Sie dies in Ihrem CSS:

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

In meinem Fall hat mir diese Antwort geholfen.

Ich fügte hinzu style.css von meinem Child-Theme der nächste 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;
}

Vollständige Pfade, damit Sie besser verstehen, was vor sich geht:

Code hier hinzufügen: /wp-content/themes/gon-child/style.css

Ursprünglicher Ort, an dem Schriftarten leben: /wp-content/plugins/woocommerce/assets/fonts/

Wahrscheinlich überschreibt ein CSS den Schriftstil des Elements. Beispielcode, der dies verursacht:

*{
    font-family:'Raleway' !important;
}

Klicken Sie auf das Dev-Tools-Element des Browsers und suchen Sie nach darunter definierten Stilen, die es möglicherweise erreichen, und deaktivieren Sie es, und Sie werden sehen, dass die Sterne geladen werden