title: How to calculate and display ratings for font-awesome using jQuery
body: <p>I am trying to display the stars and append the <code>&lt;i&gt;</code> tag dynamically based on the count.</p>
  
  <p>It's working fine, but the problem is if it has floating value then it displays the star in full, I need the star to be half (CSS class <code>fa-star-half-o</code>).</p>
  
  <p>This is what I tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ratingValue = 3.489;
  
  for (var j = 0; j &lt; ratingValue; j++) {
    $(".rating").append('&lt;i class="fa fa-star" aria-hidden="true"&gt;&lt;/i&gt;');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-1.12.3.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;div class="rating"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>