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: 
3.5 out of 5

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)