如何填写glyphicon的百分比[Bootstrap 3]

Question

嗨,我有5星评级系统,我想这样,我可以添加说4.3星而不是4.我怎么会这样做？我目前的代码如下:

<center>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star"></span>
</center>

Answer 1

您可以重叠2个绝对定位的div.每个都包含所有5颗星.然后顶部div可能有一个溢出:隐藏的div,其中您设置宽度等于百分比(基于评级).

这是一个代码集,我把它放在一起说明了它:http://codepen.io/anon/pen/ogBWwX 代码片段在下面复制以供参考,并包含一些额外的东西,用于演示目的.

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:

.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:

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();
  });
});

注意: 重叠的星星看起来不太好,因为你会看到边缘周围的背景星的颜色.因此,如果你摆脱背景恒星并使用纯色,它看起来会更好.与颜色匹配越多,它也越不明显.

我设置了glyphicons的CSS来显示:table-cell,以防止它们包裹并将它们放在一起.恒星之间的空间越大,浮标的结果越不准确.

Answer 2

您不能在图标字体上使用多种颜色，因此您的要求是不可能的。您可以使用部分背景填充，但这似乎不太理想。

如果您切换到Font Awesome，您至少可以使用半星符号。