Home Forums Themes Support Claue Change star rating to heart rating

Viewing 2 reply threads
  • Author
    Posts
    • #29708

      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

    • #29709

      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

    • #29712

      Thank you ! It’s OK 🙂

Viewing 2 reply threads

You must be logged in to reply to this topic.