How to use Star rating of Font-awesome with Django?

Question

Fontawesome has a great star rating css extension, which looks really awesome.

However clicking on any of the span elements wouldn\'t really do anything. I don\'t

Answer 1

Here's a better solution. The stars are based only on the numbers, so the search engine and the browser just reads 4.5 out of 5 and that's all. It uses my own custom font; no JS, no SVG, no Flash, no Canvas. It's also available as a progress bar.

DEMO/CODE

Here the code, without the microformat tags to make it simpler:

Rating: <span class="star-rating-icons">
<strong>3.5</strong> out of <i>5</i>
</span>

And here's the CSS that includes the font and the relevant styling:

.star-rating-icons {
    font-family: seostars;
  font-size: 1.2em;
    line-height: .6em;
    position: relative;
    width: 5em;
    text-indent: -5000px;
    display: inline-block;
    font-style: normal;
}
.star-rating-icons strong {
    font-weight: normal;
    display: block;
    position: absolute;
    left: 0px;
    color: #FC0;
    font-family: seostars;
    text-indent: 0;
}
.star-rating-icons strong:first-letter {
    font-weight: bold;
    position: absolute;
    left: 0px;
    font-style: normal;
}
.star-rating-icons i {
    color: #666;
    position: absolute;
    text-indent: 0;
    color: #666;
    left: 0;
}

Basically the first-letter of the rating is formatted with a character with that amount of whole stars, and the decimal with the partial stars. The outline of the stars is made out of the period, although it could be applied to any other character present. (By editing the font or just with a pseudo element)

Answer 2

var $star_rating = $('.rating .star');

var SetRatingStar = function() {
  return $star_rating.each(function() {


var puan = document.formname.whatever.value;



    if ( parseInt($(this).data('rating')) <= puan) {
      return $(this).removeClass('star').addClass('star filled');
    } else {
      return $(this).removeClass('star filled').addClass('star');
    }
  });
};

$star_rating.on('click', function() { 

  document.formname.whatever.value=$(this).data('rating');

  return SetRatingStar();
});



.rating{unicode-bidi:bidi-override;direction:rtl;font-size:10px;}
.rating span.star{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block}
.rating span.star:hover{cursor:pointer}
.rating span.star:before{content:"\f006";padding-right:5px;color:#999}
.rating span.star:hover:before,.rating span.star:hover~span.star:before{content:"\f005";color:#e3cf7a}
.rating span.star.filled {}
.rating span.star.filled:before{content:"\f005";color:#e3cf7a; }



<span class="rating" style="font-size:20px;">
<span class="star" data-rating="5"></span><span class="star" data-rating="4"></span><span class="star" data-rating="3"></span><span class="star" data-rating="2"></span><span class="star" data-rating="1"></span></span>

Answer 3

I ended up using Raty. If you are looking for a simple and clean solution, I found this the easiest.

$('#star').raty('score');                   // Get the current score.

Answer 4

Font Awesome and JQuery DEMO

HTML

<div>Rating Star - Function CallBack onChange</div>
<div class="well well-sm">
    <span id="rating_1" class="rating" ></span>
    <span id="result_1"></span> 
</div>
<div>Rating Star - No Editable</div>
<div class="well well-sm">
    <span id="rating_2" class="rating" data-val="2.49" data-stars='6' data-change="false"></span>
    <span>Calificaste con <b>2.49</b> de <b>6</b> Estrellas</span> 
</div>
<div>Rating Star - Tamaño - Data Html options -- Hidden input</div>
<div class="well well-sm">
   <span id="rating_3" class="rating" data-val="2.49" data-stars='10' data-input=".rating-value" data-change="true" style="font-size:35px;" >
        <input type="hidden" name="whatever3" class="rating-value" size="5"  />
   </span>
</div>
<div>Rating Star - javascript Options - input text</div>
<div class="well well-sm">
   <span id="rating_4" class="rating">
       <input type="text" name="whatever4" id="rating_val" size="1" readOnly="readOnly" />    
   </span>
    <span id="result_4"> &nbsp;&nbsp;de <b>10</b> estrellas </span> 
</div>

JavaScript

 $('#rating_1').RatingStar(
   {callback:function(val){$('#result_1').html("  "+val+" estrella(s).")}}
 );

 $('#rating_2').RatingStar();

 $('#rating_3').RatingStar();

 $('#rating_4').RatingStar({
     val:4.95,
     stars:10,
     input:'#rating_val',
     change:true
 });

Answer 5

You may check my Bootstrap JQuery Star rating plugin I created with various configurable options (demos for scenarios are included within). It uses CSS3 as much as possible, but also uses JQuery (if you are ok with that). You can get the star rating numbers OR set it easily through the plugin methods.

Uses Bootstrap 3.x glyphicons, includes RTL support, supports plugin events and methods. The plugin also supports any fractionally filled stars. You can refer the source here.

If you are keen on using Font-Awesome, you can override the plugin CSS to use Font-Awesome instead of Bootstrap Glyphicons in your project.