Заменить звездный рейтинг woocommerce по умолчанию на собственный значок звезды [закрыто] ⇐ CSS

[Anonymous]

Я пытаюсь заменить шрифт звезды woocommerce собственным значком. но не смог этого сделать... перепробовал все доступные решения здесь, на Stackoverflow, но безуспешно.
По умолчанию WordPress показывает звезду, например


Я ищу что-то вроде


Я пробовал изменить цвет фона и т. д. с помощью CSS, но он покрывает всю область, ни одной звезды ..
Может ли кто-нибудь подсказать мне, как это сделать.
Обновление:
Я использовал шрифт icomoon и применил его css

Код: Выделить всё

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

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-stars:before {
content: "\e900";
}

.woocommerce .star-rating {
position: relative;
font-size: 1em;
font-family: 'icomoon' !important;
line-height: 1;
width: 5.4em;
height: 1em;
overflow: hidden;
}

.woocommerce .star-rating:before {
content: "\e900\e900\e900\e900\e900"; /* 5 empty stars */
color: #cfc8d8; /* Grey background stars */
position: absolute;
top: 0;
left: 0;
width: 100%;
}

.woocommerce .star-rating span {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
color: #FF9800; /* Orange filled stars */
}

.woocommerce .star-rating span:before {
content: "\e900\e900\e900\e900\e900"; /* 5 filled stars */
color: inherit;
position: absolute;
top: 0;
left: 0;
}

Это дает мне звезду, как я и ожидал... но проблема показывает все 5 звезд одного цвета, даже если рейтинг для каждого продукта разный.
Я использовал такой интервал, чтобы получить фактические данные, но не получил одинаковых

Код: Выделить всё

{{rating}} out of 5

Подробнее здесь: https://stackoverflow.com/questions/791 ... -star-icon