Source Code for https://formidable-masterminds.com/understanding-formidables-star-rating-field/

display-star-icons.css

.star-rating-hover::before {
    content: '\e9d9';
    color: #F0AD4E;
}

.frm-star-group input[type="radio"]:checked + label::before,
.frm-star-group:not(.frm-star-hovered) input[type="radio"]:checked + label::before {
    color: #F0AD4E;
}

.frm-star-group input + label::before,
.frm-star-group .star-rating::before {
    font-family: 's11-fp';
    content: '\e9d7';
    color: #F0AD4E;
    display: inline-block;
    vertical-align: top;
}

hide-radio-button-input.css

.frm-star-group input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

load-s11-fp.css

@font-face {
	font-family: 's11-fp';
	src: url('../fonts/s11-fp.ttf?v=7') format('truetype'),
		url('../fonts/s11-fp.woff?v=7') format('woff'),
		url('../fonts/s11-fp.svg?v=7#s11-fp') format('svg');
	font-weight: normal;
	font-style: normal;
}

poster-source-code.html

<div style="text-align: center;">
  <div class="frm-star-group">
    <i class="star-rating-readonly star-rating star-rating-on"></i>
    <i class="star-rating-readonly star-rating star-rating-on"></i>
    <i class="star-rating-readonly star-rating star-rating-on"></i>
    <i class="star-rating-readonly star-rating star-rating-on"></i>
    <i class="star-rating-readonly star-rating star-rating-on"></i>
  </div>
  <div class="frm_clear"></div>
</div>

star-rating-field-source.html

<div class="frm-star-group">
	<input type="radio" name="item_meta[281]" id="field_star-rating-demo-0" value="1" data-invmsg="Star Rating is invalid" aria-invalid="false">
	<label for="field_star-rating-demo-0" class="star-rating star-rating-on star-rating-on"></label>
	<input type="radio" name="item_meta[281]" id="field_star-rating-demo-1" value="2" data-invmsg="Star Rating is invalid" aria-invalid="false">
	<label for="field_star-rating-demo-1" class="star-rating star-rating-on star-rating-on"></label>
	<input type="radio" name="item_meta[281]" id="field_star-rating-demo-2" value="3" data-invmsg="Star Rating is invalid" aria-invalid="false">
	<label for="field_star-rating-demo-2" class="star-rating star-rating-on"></label>
	<input type="radio" name="item_meta[281]" id="field_star-rating-demo-3" value="4" data-invmsg="Star Rating is invalid" aria-invalid="false">
	<label for="field_star-rating-demo-3" class="star-rating star-rating-on"></label>
	<input type="radio" name="item_meta[281]" id="field_star-rating-demo-4" value="5" data-invmsg="Star Rating is invalid" aria-invalid="false">
	<label for="field_star-rating-demo-4" class="star-rating star-rating-on"></label>
	<div style="clear:both;"></div>
</div>

stars.js

function loadStars() {
	/*jshint validthis:true */
	updateStars( this );
}

function hoverStars() {
	/*jshint validthis:true */
	var input = this.previousSibling;
	updateStars( input );
}

function updateStars( hovered ) {
	var starGroup = hovered.parentElement,
		stars = starGroup.childNodes,
		current = parseInt( hovered.value ),
		starClass = 'star-rating',
		selectLabel = false;

	starGroup.className += ' frm-star-hovered';

	for ( var i = 0; i < stars.length; i++ ) {
		if ( typeof stars[ i ].className !== 'undefined' && stars[ i ].className.indexOf( starClass ) > -1 ) {
			if ( selectLabel ) {
				stars[ i ].className += ' star-rating-hover';
			} else {
				stars[ i ].classList.remove( 'star-rating-hover', 'star-rating-on' );
			}
		} else {
			selectLabel = ( parseInt( stars[ i ].value ) <= current );
		}
	}
}

function unhoverStars() {
	/*jshint validthis:true */
	var input = this.previousSibling,
		starGroup = input.parentElement;
	starGroup.classList.remove( 'frm-star-hovered' );
	var stars = starGroup.childNodes;
	var selected = jQuery( starGroup ).find( 'input:checked' ).attr( 'id' );
	var isSelected = '';

	for ( var i = stars.length - 1; i > 0; i-- ) {
		if ( typeof stars[ i ].className !== 'undefined' && stars[ i ].className.indexOf( 'star-rating' ) > -1 ) {
			stars[ i ].classList.remove( 'star-rating-hover' );
			if ( isSelected === '' && typeof selected !== 'undefined' && stars[ i ].getAttribute( 'for' ) == selected ) {
				isSelected = ' star-rating-on';
			}
			if ( isSelected !== '' ) {
				stars[ i ].className += isSelected;
			}
		}
	}
}

/* this code initializes the star functions */
jQuery( document ).on( 'mouseenter click', '.frm-star-group input', loadStars );
jQuery( document ).on( 'mouseenter', '.frm-star-group .star-rating:not(.star-rating-readonly)', hoverStars );
jQuery( document ).on( 'mouseleave', '.frm-star-group .star-rating:not(.star-rating-readonly)', unhoverStars );