CSS Rating Use DashIcons

#HTML
<div class="rating"><i class="star" data-star='1'></i></div>
<div class="rating"><i class="star" data-star='1.5'></i></div>
<div class="rating"><i class="star" data-star='2'></i></div>
<div class="rating"><i class="star" data-star='2.5'></i></div>
<div class="rating"><i class="star" data-star='3'></i></div>
<div class="rating"><i class="star" data-star='3.5'></i></div>
<div class="rating"><i class="star" data-star='4'></i></div>
<div class="rating"><i class="star" data-star='4.5'></i></div>
<div class="rating"><i class="star" data-star='5'></i></div>

#CSS 
.star { 	
	color: #F39C12;
	font-family: dashicons;
	font-style: normal;
	font-size: 1.2rem;
	line-height: 1rem;
}
.star[data-star='1']:before {
	content: "\f155\f154\f154\f154\f154";
}
.star[data-star='1.5']:before {
	content: "\f155\f459\f154\f154\f154";
}
.star[data-star='2']:before {
	content: "\f155\f155\f154\f154\f154";
}
.star[data-star='2.5']:before {
	content: "\f155\f155\f459\f154\f154";
}
.star[data-star='3']:before {
	content: "\f155\f155\f155\f154\f154";
}
.star[data-star='3.5']:before {
	content: "\f155\f155\f155\f459\f154";
}
.star[data-star='4']:before {
	content: "\f155\f155\f155\f155\f154";
}
.star[data-star='4.5']:before {
	content: "\f155\f155\f155\f155\f459";
}
.star[data-star='5']:before {
	content: "\f155\f155\f155\f155\f155";
}