通过FontAwesome获得星级评分的CSS

Question

我已经通过不同的方法尝试了一些CSS星级评分，我试图通过FontAwesome而不是使用精灵来实现以下内容。我希望能够理想地包括半星，但这是下面的例子失败的地方。这是我到目前为止所尝试的。我不能让半/部分星在这里正常工作。任何指针都非常感谢！

.score {
  display: block;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}

.score-wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 19px;
}

.score .stars-active {
  color: #EEBD01;
  position: relative;
  z-index: 10;
  display: inline-block;
}

.score .stars-inactive {
  color: grey;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: initial;
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:88%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:50%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:100%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:0%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

Answer 1

溢出：隐藏需要在'明星活跃'（大小的元素）而不是'得分换行'（从不溢出。）你可以使用white-space: nowrap来阻止星星包裹到隐藏溢出容器中的下一行。

.score {
  display: block;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}

.score-wrap {
  display: inline-block;
  position: relative;
  height: 19px;
}

.score .stars-active {
  color: #EEBD01;
  position: relative;
  z-index: 10;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.score .stars-inactive {
  color: grey;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: initial;
  /* overflow: hidden; */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:88%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:50%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:100%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:0%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

Answer 2

我在Paales找到了这个解决方案：https://github.com/FortAwesome/Font-Awesome/issues/717

我认为这是一个优雅的解决方案。它看起来与您的代码相当，因为完整的星星与空星重叠并使用overflow: hidden和position: absolute。现在你可以设置完整恒星的宽度并显示部分填充的恒星。如果要显示半星，可以以10％的增量更改绝对定位元素的宽度。

.rating-box {
  position:relative;
  vertical-align: middle;
  font-size: 3em;
  font-family: FontAwesome;
  display:inline-block;
  color: #F68127;
}
.rating-box:before{
    content: "\f006 \f006 \f006 \f006 \f006";
  }
.rating-box .rating {
    position: absolute;
    left:0;
    top:0;
    white-space:nowrap;
    overflow:hidden;
    color: #F68127;
  }
  .rating-box .rating:before {
      content: "\f005 \f005 \f005 \f005 \f005";
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<div class="rating-box">
    <div class="rating" style="width:30%;"></div>
</div>

PS：Daniel Beck已经就你对white-space: no-wrap所犯的错误给出了答案，所以我建议接受这个答案。我只是想分享这个解决方案，因为我认为这是一个非常好的替代方法。

Answer 3

为了将来参考，FontAwesome在其武器库中增加了半颗星。确保在页面的<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">部分包含<head>，然后以下内容将为您提供基本结构。

    <span class="score">
<div class="score-wrap">
    <span class="stars-active" style="width:88%">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star-half" aria-hidden="true"></i>
    </span>
</span>
</div>

如果您希望星星看起来更大，请将fa fa-star编辑为fa fa-star 3x，其中3x表示大小，所以3x，4x，5x等。如果您想要其他样式的星星，请使用fa-star-o。默认颜色是黑色，因此如果您要更改颜色，则可以通过CSS对其进行编辑，也可以将颜色添加到类中，即class="fa-star-o bg-light"

Answer 4

非常好，谢谢分享。 我做了与Faraz相同的调整，切换到

<i class="fas fa-star" aria-hidden="true"></i>

在活跃的星星范围内，和

<i class="far fa-star" aria-hidden="true"></i>

在不活跃的星星中， 因为困扰我的是没有出现超过％的评分的星星。

Answer 5

我发现自己做的两套恒星和常规星样式。首先宣布实心组具有较高的z索引，并且重叠的常规恒星组受隐藏，nowrap和宽度控制。

.stars-rating {
	position: relative;
    display: inline-block;
}

.stars-rating .stars-score {
              position: absolute;
              top: 0;
              left: 0;
              overflow: hidden;
              width: 20%;
              white-space: nowrap;
}

		    <div class="stars-rating">
		    	<div class="stars-score" style="width: 20%">
		    		<i class="fas fa-star"></i>
		    		<i class="fas fa-star"></i>
		    		<i class="fas fa-star"></i>
		    		<i class="fas fa-star"></i>
		    		<i class="fas fa-star"></i>
		    	</div>
				<div class="stars-scale">
					<i class="far fa-star"></i>
					<i class="far fa-star"></i>
					<i class="far fa-star"></i>
					<i class="far fa-star"></i>
					<i class="far fa-star"></i>
				</div>
		    </div>

Answer 6

下面是@Rob's answer above的Font Awesome 5版本：

我们可以使用font-family: "Font Awesome 5 Free"; font-weight: xxx;在实线和轮廓之间切换

您可以在following link处使用代码。

/* rating box with fontawesome 5 inspired from - https://stackoverflow.com/a/49343426/6908282*/

.rating-box {
  position: relative;
  vertical-align: middle;
  font-size: 3em; /* comment/edit this to change size */
  font-family: FontAwesome;
  display: inline-block;
  color: #F68127;
}

.rating-box:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f005 \f005 \f005 \f005 \f005";
}

.rating-box .rating {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #F68127;
}

.rating-box .rating:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f005 \f005 \f005 \f005 \f005";
}

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

<div class="rating-box">
  <div class="rating" style="width:52%;"></div>
</div>