html - 使用由宽度定义的 Font Awesome 星级

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 也是一种选择。它包含几个您可以使用的星星。

下面的代码片段表明您可以只使用一个元素来完成此操作。添加类(class) score , 和其中一类 s0至 s10表示从 0 到 10 的分数。当然，而不是使用 ::before和 ::after伪元素，您可以添加嵌套跨度并在 style 属性中为黄色元素提供 80% 的宽度，但在我的示例中，分数元素与其显示方式更加分离，我认为这是一种更好的方法。

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

我会选择一到十，因为您表示您也想要半星(这很常见)。通过使用到 10 的比例，您可以使用整数值，这从程序员的 Angular 来看更直观。您只有一个整数分数，然后由 CSS 将其转换为半星。

当然，您可以使用任何字体的任何符号来做到这一点。

.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%;
}

The score is: <span class="score s7"></span>

2:直接在标签中设置百分比

如果你想在HTML中专门设置宽度，你不能使用::before和 ::after .你需要一个实际的元素。实际上，它使 CSS 更容易一些，因为您不需要预定义宽度。 HTML 也不是很复杂。分数的跨度获得一个仅设置了宽度的匿名子元素。您可以指定 0 到 100% 之间的任何宽度。

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

.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;
}

The score is: <span class="score"><span style="width: 88%"></span></span>