使用宽度定义的字体真棒星级

Question

目前，对于评论，我使用css显示的星级评分和背景类 但是我想用Font Awesome替换它，因为在高分辨率屏幕上字体更加清晰。

唯一的问题是评级是以％为单位的宽度类动态定义的 我无法将代码更改为定义宽度的不同div类。

例如，使用课程width="80%;"

显示4,5星的分数

最高分为5星。

它应如下所示：

如何用Font Awesome明星替换它？

另请参阅此JSFiddle：https://jsfiddle.net/tLj2ybnu/8/

Answer 1

这个答案包括两个解决方案。第一个是纯CSS。您只需设置一个类来指示从0到10的分数。第二个代码段更简单和更灵活;它允许您在标签本身中设置百分比。

在这两个示例中，我使用了Wingdings字体中的星号，但您可以使用其他字体和字符甚至是背景图像。两种情况下的解决方案都是将星星的灰色背景和剪裁到正确宽度的金色叠加层。

1：预定义的类，表示0到10之间的值

我认为只需要一点CSS就可以做到这一点。您可以使用特殊字体，但也许Wingdings也是一种选择。它包含一些你可能会使用的星星。

下面的代码段显示您只能使用一个元素执行此操作。将课程score和其中一个课程s0添加到s10，以指示0到10之间的分数。当然，不要使用::before和{{1} }伪元素，你可以添加嵌套的跨度，并在样式属性中给黄色宽度为80％，但在我的例子中，得分元素与它的显示方式更加分离，我认为这是一种更好的方法。 / p>

CSS非常冗长，但是使用像SCSS这样的预处理器，您可以用更紧凑的方式编写它。

我会选择一到十，因为你表示你也想要半星（这很常见）。通过使用10的缩放，您可以使用整数值，从程序员的角度来看，这更直观。你只有一个整数分数，然后由CSS翻译成半星。

当然，您可以使用任何字体的任何符号来执行此操作。

::after

.score {
  display: inline-block;
  font-family: Wingdings;
  font-size: 30px;
  color: #ccc;
  position: relative;
}
.score::before,
.score::after {
  content: "\2605\2605\2605\2605\2605";
  display: block;
}
.score::after {
  color: gold;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.score.s0::after {
  width: 0%;
}
.score.s1::after {
  width: 10%;
}
.score.s2::after {
  width: 20%;
}
.score.s3::after {
  width: 30%;
}
.score.s4::after {
  width: 40%;
}
.score.s5::after {
  width: 50%;
}
.score.s6::after {
  width: 60%;
}
.score.s7::after {
  width: 70%;
}
.score.s8::after {
  width: 80%;
}
.score.s9::after {
  width: 90%;
}
.score.s10::after {
  width: 100%;
}

2：在标记中直接设置百分比

如果您想专门设置HTML格式的宽度，则无法使用The score is: <span class="score s7"></span>和::before。你需要一个实际的元素。实际上，它使CSS更容易，因为您不需要预定义宽度。 HTML也不是很复杂。得分的范围得到一个只有宽度设置的匿名子元素。您可以指定0到100％之间的任何宽度。

外部元素（带有类）用作容器，并生成灰色星星。内部元素生成覆盖在灰色上的黄色星星。

::after

.score {
  display: inline-block;
  font-family: Wingdings;
  font-size: 30px;
  color: #ccc;
  position: relative;
}
.score::before,
.score span::before{
  content: "\2605\2605\2605\2605\2605";
  display: block;
}
.score span {
  color: gold;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

Answer 2

请检查此JSFIDDLE链接。希望这能解决你的问题。

＆＃13;

＆＃13;

@import url(http:/netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 .rating-box .rating:after {
  font-family: FontAwesome;
  content: "\f005";
  font-size: 13px;
  margin-right: 5px;
  vertical-align: top;
  line-height: 15px !important;
}
.rating-box {
  background: none;
  color: #eee;
}
.rating {
  color: yellow;
  float: left;
}
.disabled {
  color: #eee;
}

＆＃13;

<div class="rating-box">
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating disabled"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您想使用轮廓的星星，因此无法使用color属性，您可以随时使用它。

1. 为您的星星创建一个容器，并为其提供position: relative属性
2. 在该容器中，创建一个包含5个空白的第一个元素 分
3. 在同一个容器中，创建一个包含5个完整的第二个元素 星星，并给它那些属性：position: absolute; top: 0; left: 0; white-space: nowrap;具有所需的宽度