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

【问题标题】：Use font awesome star rating define by width使用按宽度定义的字体真棒星级
【发布时间】：2015-08-26 05:49:17
【问题描述】：

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

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

例如，使用 width="80%;" 类显示 4,5 星的分数

最高分数为 5 星。

应该是这样的：

如何用 Font Awesome 星号替换它？

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

【问题讨论】：

问题不清楚，demo也不好用，是不是找display:inline-block给元素定义宽度？
@sdcr 我想用 Font Awesome 替换我当前的 css。我需要的是背景中的 5 星评级，高于以宽度定义的评级：%。 100% 宽度是 5 星评级，80% 是 4 星等。

标签： html css fonts

【解决方案1】：

这个答案包括两个解决方案。第一个是纯 CSS。您只需设置一个类来表示从 0 到 10 的分数。第二个 sn-p 更简单并且更灵活；它允许您在标签本身中设置百分比。

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

1：预定义的类以指示从 0 到 10 的值

我认为只需一点 CSS，您就可以轻松做到这一点。您可以使用特殊字体，但也许 Wingdings 也是一种选择。它包含几颗星，您可以使用它们。

下面的 sn-p 表明你可以只用一个元素来做到这一点。添加 score 类，以及 s0 到 s10 中的一个类来表示从 0 到 10 的分数。当然，您可以添加嵌套跨度，而不是使用 ::before 和 ::after 伪元素并在 style 属性中为黄色元素设置 80% 的宽度，但在我的示例中， score 元素与其显示方式更加分离，我认为这是一种更好的方法。

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

我会选择一到十，因为您表示您也想要半星（这很常见）。通过使用 10 的比例，您可以使用整数值，这从程序员的角度来看更直观。你只有一个整数分数，然后由 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: &lt;span class="score s7"&gt;&lt;/span&gt;

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: &lt;span class="score"&gt;&lt;span style="width: 88%"&gt;&lt;/span&gt;&lt;/span&gt;

【讨论】：

谢谢！但是宽度是在 div 的 html 中定义的。所以我无法在css中定义它。平均分也可能达到 96% 的宽度，那么我应该如何管理呢？
我添加了第二个 sn-p 来显示这一点。它使 CSS 更短，而 HTML 几乎不再复杂。如您所见，我在示例中将其提高到 88%，仅差 4.5 星。
第二个选项对我不起作用（可能是因为我使用的是 Bootstrap），因为减小宽度会导致星星放在新行上。我通过将white-space: pre; 添加到.score span 选择器来修复。

【解决方案2】：

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

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

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

【讨论】：

谢谢！唯一的问题是代码以宽度% 动态加载。所以我不能轻易地在不同的 div 类中改变它。
哦，好吧..所以你可以看看 CSS3 伪类，比如 last-child、nth child...这会有所帮助
那应该是什么样子，因为我需要用动态宽度来定义它。你有 JSFiddle 的例子吗？
我对此的唯一建议是改用最新版本的字体真棒。用 4.3.0 替换 3.2.1。
@Jelle，请再次查看我更新的 jsfiddle 链接。 jsfiddle.net/avijitkr/tLj2ybnu/12

【解决方案3】：

如果你想使用有轮廓的星星，因此不能使用颜色属性，你总是可以用一种简单的方法来做。

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

【讨论】：