Star Meter

<!--- hi! this is co-fronting, the creator of the star meter. @spinnerprincess is the creator of this original coding, with me only updating it with star meter names and symbols. all credit goes to them for making this amazing code. have fun using! -->

<!--- part one, goes underneath any <meta name=…> tags, or underneath <head>, or before </head> - whatever works! -->

<meta name="if:centered stars" content="1"/>
<meta name="text:current stars" content="12"/>
<meta name="text:maximum stars" content="12"/>
<meta name="color:full stars" content="#000"/>
<meta name="color:empty stars" content="#ddd"/>
<meta name="text:star size" content="16"/>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
   $(document).ready(function () {
       for (var i=0; i < {text:current stars}; i++) {
           $(".stars").append(’<span style="color:{color:full stars}"><i class="fa fa-star"></i></span>’);
       }

       for (var i=0; i < ({text:maximum stars} - {text:current stars}); i++) {
           $(".stars").append(’<span style="color:{color:empty stars}"><i class="fa fa-star"></i></span>’);
       }
   });
</script>

<!-- part two, goes underneath {description} or wherever else you want your stars to show up: -->

<div class="stars" title="{text:current stars}/{text:maximum stars} stars" style="font-size: {text:star size}px;{block:ifCenteredstars}width: 100%; text-align:center;{/block:ifCenteredstars}{block:ifNotCenteredstars}display: inline-block;{/block:ifNotCenteredstars}"></div>