Wie füllt man einen Anteil von einem glyphicon [Bootstrap 3]

Könnten Sie überschneiden sich 2 absolut positionierten divs. Jeder enthält alle 5 Sterne. Dann die top-div könnte ein overflow:hidden div, wo Sie legen Sie die Breite in Höhe eines Prozentsatzes (auf der Grundlage der Bewertung).

Hier ist ein codepen, die ich zusammen gestellt habe, die zeigt es: http://codepen.io/anon/pen/ogBWwX Der code-Schnipsel kopiert werden unten für Referenz und beinhaltet ein wenig mehr als das, was erforderlich ist, für den Zweck der demo.

HTML:

HTML:

<div class="container">
  <div class="flt_left">
    <form id="star_form">
      <label for="star_input">Stars:</label>
      <input type="text" id="star_input" />
      <button id="setStars">Set Rating</button>
    </form>
  </div>
  <div class="flt_left">
    <div id="star_box">
      <div class="star_limiter">
        <div class="longbar">
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
        </div>
      </div>
    </div>
    <div class="star_bg">
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
    </div>
  </div>
  <div style="clear:both;"></div>
  <p id="rating_data"></p>
</div>

CSS:

CSS:

.container{
  padding: 15px;
  margin: 10px;
}
p{
  margin: 10px 0;
}
.flt_left{
  float: left;
  margin-right: 10px;
  position: relative;
  /*min-width: 250px;*/
}
#star_box,
.star_bg{
  color: #BBD41C;
  position: absolute;
  margin: 4px 0;
  top: 0;
  left: 0;
  display: table;
}
.glyphicon{
  display: table-cell;
  padding: 0 0 0 2px;
  font-size: 18px;
}
#star_box{
  z-index: 2;
}
.star_bg{
  color: #555;
}
#star_box .star_limiter{
  width:100%;
  overflow: hidden;
  position: relative;
}

Javascript:

JS:

function setWidth(perc){
  $('#star_box .star_limiter').css('width',perc+'%');
}
function starToPercent(amt,outof){
  if(typeof outof == 'undefined') outof = 5;
  var percent = Math.round(amt*100/outof);
  if(percent > 100) percent = 100;
  $('#rating_data').text(amt+' of '+outof+' stars, or '+percent+'%');
  setWidth(percent);
}
function setRating(){
  var input = parseFloat($('#star_input').val());
  var num_stars = $('#star_box .star_limiter .glyphicon-star').length;


  if(!isNaN(input)) starToPercent(input, num_stars);
}

$(document).ready(function(){
  var star_width = $('#star_box').width();
  var star_height = $('#star_box').height();
  $('#star_box').css('width',star_width+'px');
  $('#star_box .star_limiter').css('height',star_height+'px');
  $('#star_box .longbar').css('width',star_width+'px');
  
  $('#setStars').click(setRating);
  $('#star_form').submit(function(e){
    e.preventDefault();
    setRating();
  });
});

Hinweise:
Die überlappenden Sterne nicht gut Aussehen, da Sie sehen, ein bisschen von der Farbe des Hintergrunds Sternen an den Rändern. So, es sieht besser aus, wenn Sie loszuwerden, die hintergrund-stars und benutzen Sie einfach eine Farbe. Es ist auch weniger Auffällig, je mehr Sie mit der Farbe.

Ich die CSS für die glyphicons auf display:table-cell zu verhindern, dass Sie aus der Verpackung und positionieren Sie Sie näher zusammen. Mehr Platz zwischen den Sternen erzeugt weniger genaue Ergebnisse, auf Schwimmern.

Ich fand diese Werke, der große Nachteil ist, dass Sie brauchen, um die Stil-spezifischen Klassen, basierend auf der schriftart, Größe:

HTML:

 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star half-star"></i>

CSS:

.half-star {
        width:5px; //Roughly half the font size
        overflow:hidden;
 }

Font-awesome hat eine fertige star-system-Lösung:
Blick auf "Star-Ratings (inspiriert von CSS-Tricks)"
in Ihrer website