html - Use Font Awesome star rating for radio buttons -

i try load font awesome css display star rating instead of default radio buttons.

i use magento webshop, uses star rating.
default code dynamic , looks this:

            <?php foreach ($this->getratings() $_rating): ?>                 <tr>                     <th><?php echo $this->escapehtml($_rating->getratingcode()) ?></th>                 <?php foreach ($_rating->getoptions() $_option): ?>                     <td class="value"><input type="radio" name="ratings[<?php echo $_rating->getid() ?>]" id="<?php echo $this->escapehtml($_rating->getratingcode()) ?>_<?php echo $_option->getvalue() ?>" value="<?php echo $_option->getid() ?>" class="radio" /><label class = "full" for="<?php echo $this->escapehtml($_rating->getratingcode()) ?>_<?php echo $_option->getvalue() ?>"></label></td>                 <?php endforeach; ?>                 </tr>             <?php endforeach; ?> 

i tried jsfiddle, can't done, fill stars based on review. input 5 5 stars filled. also; http://codepen.io/jamesbarnett/pen/vlpkh

what doing wrong?

https://jsfiddle.net/tlj2ybnu/7/

https://jsfiddle.net/tlj2ybnu/4/

change:

.rating > label:before 

to:

.rating label:before