Font Awesome 5 Unicode [英] Font Awesome 5 unicode
问题描述
Font Awesome 5 星图标有 <i class="fas fa-star"></i>
和 <i class="far fa-star"></i>
不同的是 fas , far
并且两者的 Unicode 都是 f005
现在我想用它作为我的评分系统,首先是普通星并通过点击成为实心明星,但我如何在我的 css 中定义这个 fas
far
?
Font Awesome 5 star icon has <i class="fas fa-star"></i>
and <i class="far fa-star"></i>
different is fas , far
and Unicode for both is f005
now i want to use it as my rating system where first is regular star and by click become solid star, but how do I define this fas
far
in my css?
input.star:checked ~ label.star:before {
content: 'f005';
color: #e74c3c;
transition: all .25s;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
label.star:before {
content: 'f005';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
通过我上面的代码,我只能得到实心的星星
with my codes above i only get solid star
推荐答案
如果您使用的是 JS+SVG 版本,请阅读:Font Awesome 5 在使用 JS+SVG 版本时显示空方块
If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version
regular 和 solid 版本之间的区别在于 font-weight
.您只需调整此版本即可在两个版本之间切换:
The difference between the regular and the solid version is the font-weight
. You simply need to adjust this one to swap between both version:
input.star:checked ~ label.star:before {
content: 'f005';
color: #e74c3c;
transition: all .25s;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
label.star:before {
content: 'f005';
font-family: 'Font Awesome 5 Free';
font-weight: 200;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<input type="checkbox" class="star">
<label class="star"></label>
这是另一个相关问题 伪元素上的 Font Awesome 5 显示方形而不是图标以获取更多详细信息.
Here is another related question Font Awesome 5 on pseudo elements shows square instead of icon for more details.
这篇关于Font Awesome 5 Unicode的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!