How to use bootstrap icons like star to give the star rating?

Question

How to use the Bootstrap icons for giving the star rating through css or jquery. Since i am being told not to used any Plugins for that so i am confused on how to change the color of the star icon and get the star icon colored from starting star till the clicked star.

Answer 1

You can actually do this in PURE CSS

Demo Fiddle

HTML

<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" />
    <label for="star5">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" />
    <label for="star4">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" />
    <label for="star3">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" />
    <label for="star2">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" />
    <label for="star1">1 star</label>
</fieldset>

CSS

 .rating {
    float:left;
    border:none;
}
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0, 0, 0, 0);
}
.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
}
.rating:not(:checked) > label:before {
    content:'★ ';
}
.rating > input:checked ~ label {
    color: #f70;
}
.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label {
    color: gold;
}
.rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label {
    color: #ea0;
}
.rating > label:active {
    position:relative;
}