Hello! I try to make the simple rating srats with html and css. The star become active after adding class “checked” inactive star have only “fa fa-star” classes.
<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa-star {
color: white;
-webkit-text-stroke: 1px red;
}
.checked {
color: red;
}
</style>
</head>
<body>
<h2>Star Rating</h2>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</body>
</html>
Is there any possibility to use this simple stars with ACF? I need some option that will add class “checked”. I know that I can do it with radio button, but in this case will be possible to check stars randomly.
The simplest solution is to use button group with 12345 buttons.
<?php
$ratingstar = get_field('checked');
?>
<span class="fa fa-star <?php if ($ratingstar >= 1) { echo 'checked';}?>"></span>
<span class="fa fa-star <?php if ($ratingstar >= 2) { echo 'checked';}?>"></span>
<span class="fa fa-star <?php if ($ratingstar >= 3) { echo 'checked';}?>"></span>
<span class="fa fa-star <?php if ($ratingstar >= 4) { echo 'checked';}?>"></span>
<span class="fa fa-star <?php if ($ratingstar == 5) { echo 'checked';}?>"></span>
