使用字体真棒星级由宽度定义 [英] Use font awesome star rating define by width
问题描述
目前用于评论我使用CSS背景类显示的星级评级。
但是我想用Font Awesome替换它，因为在高分辨率屏幕上字体更清晰。
唯一的问题是评级是由％class宽度类动态定义的。
我不能将代码更改为定义宽度的不同div类。例如，使用类 width =80％; 显示4,5星的得分。 / p>
最高分是5星。
它应该是这样的：
如何将其替换为Font Awesome stars？
另请参阅此JSFiddle： https://jsfiddle.net/tLj2ybnu / 8 /
这个答案包括两个解决方案。第一个是纯CSS。你只需设置一个类来表示从0到10的分数。第二个片段更简单和更灵活;它允许你在标签中设置一个百分比。
在这两个例子中，我使用了Wingdings字体的星形，但是你可以使用其他的字体和字符，甚至背景图片。在这两种情况下的解决方案是有一个灰色的背景开始和一个黄金覆盖被裁减到正确的宽度。
1：预定义的类来指示值从0到10
我想只需要一点CSS就可以简单地做到这一点。你可以使用一个特殊的字体，但Wingdings也是一个选项。它包含你可以使用的几颗星星。
下面的代码片断显示只有一个元素可以做到这一点。添加类得分，以及其中一个类 s0 到 s10 :: before 和 :: after 伪元素，你可以添加嵌套跨度，并在style属性中给黄色的宽度设置80％，但是在我的例子中，score元素与它的显示方式更加分离，我认为这是一个更好的方法。 p>
我会选择一到十个，因为你表示你也想要半颗星星（这很常见）。通过使用比例为10，您可以使用整数值，从程序员的角度来看更直观。你只有一个整数分数，然后由CSS翻译成半个星。
当然，您可以使用任何字体的任何符号来完成此操作。
.score {display：inline-block; font-family：Wingdings; font-size：30px;颜色：#ccc; score：before，.score :: after {content：\ 2605\\2605\\2605\\2605\\2605; display：block;}。score :: after {color：gold;位置：绝对;顶部：0;左：0; 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： ：{width：100％;}
：< span class =score s7>< / span>
2：在标记中直接设置百分比
如果要专门设置HTML的宽度，使用 :: before 和 :: after 。你需要一个实际的元素。实际上，它使得CSS更容易，因为你不需要预定义宽度。 HTML也不是很复杂。分数的跨度得到一个只有宽度设置的匿名子元素。你可以指定从0到100％的任何宽度。
外部元素（带有类）用作容器，并生成灰色星星。内部元素生成覆盖在灰色星星上的黄色星星。
.score
得分为：< span class =score>< span style =width：88％>< / span>< / span>
Currently for reviews I use star rating that is displayed by css with background classes.
But I want to replace this by Font Awesome because a font is much sharper on high res screens.
The only problem is that the rating is defined dynamically by a width class in %.
I can not change the code into different div classes that define the width.
For example a score of 4,5 stars is displayed using the class width="80%;"
Max score is 5 stars.
It should look like this:
How can I replace this with Font Awesome stars?
See also this JSFiddle: https://jsfiddle.net/tLj2ybnu/8/
This answer includes two solutions. The first is pure CSS. You just set a class to indicate a score from 0 to 10. The second snippet is simpler and more flexible; it allows you to set a percentage in the tag itself.
In both examples I used stars from the Wingdings font, but you could use other fonts and characters or even a background image. The solution in both cases is to have a grey background of starts and a golden overlay that is clipped to the right width.
1: Predefined classes to indicate a value from 0 to 10
I think with just a bit of CSS you can simply do this. You could use a special font, but maybe Wingdings is also an option. It contains a couple of stars which you may use.
The snippet below shows that you can do this with only one element. Add the class score, and one of the classes s0 to s10 to indicate a score from 0 to 10. Of course, instead of using ::before and ::after pseudo-elements, you could add nested spans and give the yellow one a width of 80% in the style attribute, but in my example the score element is more detached from how it is displayed, which I think is a better approach.
I'd choose one to ten, because you indicated you want half stars as well (which is common). By using a scale to 10, you can use integer values, which is more intuitive from a programmer perspective. You just have an integer score, which is then translated by CSS to half stars.
Of course you can do this with any symbol from any font.
.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: Set the percentage straight in the tag
If you want to set the width in HTML specifically, you can't use ::before and ::after. You'll need an actual element for that. Actually, it makes the CSS a bit easier, because you don't need to predefine the widths. The HTML also isn't very complex. The span for the score gets one anonymous sub element that has just the width set. You can specify any width from 0 to 100%.
The outer element (with the class) serves as a container, and generates the grey stars. The inner element generates the yellow stars overlaid on the grey ones.
.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>
这篇关于使用字体真棒星级由宽度定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
