Как заменить иконки на svg?

Question

Для показа рейтинга в виде звёзд используется шрифт font-awesome.
Нужно заменить этот шрифт на svg.
https://jsfiddle.net/2Lbdtf74/2/

.star-rating{
  overflow: hidden;
  position: relative;
  height: 14px;
  line-height: 14px;
  letter-spacing: 5px;
  font-size: 14px;
  width: 90px;
  margin: 0px auto;
  font-family:fontawesome;
  text-rendering: auto;
  color: #d5d6d8;
}
.star-rating:before {
    content: "\f005\f005\f005\f005\f005";
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}
.star-rating span{
    color: #f5b223;
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 15px;
    height: 0;
}
.star-rating span:before {
    content: "\f005\f005\f005\f005\f005";
    top: 0;
    position: absolute;
    left: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">



<div class="star-rating">
  <span style="width:80%"></span>
</div>

Звёзды нужно заменить на такие svg, приведённые ниже, желательно с сохранением структуры блоков и стилей:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<style type="text/css">
	.st0{fill:#ffff00;}
</style>
<path class="st0" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
  
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<style type="text/css">
	.st1{fill:#a0a0a0;}
</style>
<path class="st1" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>

Как это сделать?

P.S.
как заменить этот участок content: "\f005\f005\f005\f005\f005" на svg?
т.е. можно ли сделать чтобы значение рейтинга устанавливалось как-то так:
<span style="width:80%"></span>?

БЛОГ НА HUSL

Как заменить иконки на svg?

Ответы (0 шт):