Change star rating to heart rating

[Lapetitenovice]

Hi,

I change a icon rating to heart but i don’t know why the icon before rating is solid instead of regular. What is it a problem in my code please.

.star-rating {
font-family: 'FontAwesome';
font-size: 10px;
height: 20px;
line-height: 20px;
overflow: hidden;
position: relative;
text-align: left;
width: 5.8em;
letter-spacing: 3px;
margin: auto;
}
.products .star-rating,
.widget .star-rating {
margin: 0;
}
.star-rating:before,
.star-rating span:before {
content: '\f004\f004\f004\f004\f004';
left: 0;
top: 0;
position: absolute;
}
.star-rating:before {
color: #c1c1c1;
}
.star-rating span {
overflow: hidden;
position: absolute;
text-indent: -999em;
}
.star-rating span:before {
color: #ffa800;
text-indent: 0;
}
.stars {
font-size: 11px;
letter-spacing: 3px;
width: 7em;
margin-left: 15px;
margin-top: 1px;
}
.stars [class*="star"] {
text-indent: -999em;
display: block;
position: absolute;
display: inline-block;
color: #ffa800;
}
.stars [class*="star"]:before {
position: absolute;
font-family: "FontAwesome";
left: 0;
text-indent: 0;
}
.stars .star-1 {
width: 15px;
z-index: 50;
}
.stars .star-2 {
width: 30px;
z-index: 40;
}
.stars .star-3 {
width: 45px;
z-index: 30;
}
.stars .star-4 {
width: 60px;
z-index: 20;
}
.stars .star-5 {
width: 75px;
z-index: 10;
}
.stars .star-5:before {
content: "\f004\f004\f004\f004\f004";
}
.stars .star-1:hover:before,
.stars .star-1.active:before {
content: "\f004";
}
.stars .star-2:hover:before,
.stars .star-2.active:before {
content: "\f004\f004";
}
.stars .star-3:hover:before,
.stars .star-3.active:before {
content: "\f004\f004\f004";
}
.stars .star-4:hover:before,
.stars .star-4.active:before {
content: "\f004\f004\f004\f004";
}
.stars .star-5:hover:before,
.stars .star-5.active:before {
content: "\f004\f004\f004\f004\f004";
}

Best regards

[Harry]

Hi,

Please change your code to

.stars .star-5:before {
content: "\f08a\f08a\f08a\f08a\f08a";
}
.stars .star-1:hover:before,
.stars .star-1.active:before {
content: "\f004";
}
.stars .star-2:hover:before,
.stars .star-2.active:before {
content: "\f004\f004";
}
.stars .star-3:hover:before,
.stars .star-3.active:before {
content: "\f004\f004\f004";
}
.stars .star-4:hover:before,
.stars .star-4.active:before {
content: "\f004\f004\f004\f004";
}
.stars .star-5:hover:before,
.stars .star-5.active:before {
content: "\f004\f004\f004\f004\f004";
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Lapetitenovice]

Thank you ! It’s OK 🙂

[Author]

Posts