Css 字体5 unicode

Font Awesome五星图标有

和

不同的是

fas，far

和Unicode都是

f005

，现在我想用它作为我的评级系统，首先是普通星，然后点击变成实心星，但我如何在css中定义这个

fas

代码

---

使用上面的代码，我只能得到实心星形

当处于非活动/默认状态时，无法100%确定您需要哪种类型的星形，因此猜测您需要空心星形。通过将

font-weight

更改为

400

或

900

，可以显著更改FA5图标的外观。我在演示中根据重要评论放置了星星。其余的更改只是可选的杂项样式，如

文本阴影

、双向

过渡

在

上：悬停

，等等。虽然可选，但您应该尝试隐藏实际复选框并仅使用标签，这样更美观

演示

input.star{
/*⭐} 通过使用标签作为界面（按钮），可以隐藏此信息*/
显示：无；
}
.明星{
颜色：rgba（255，255，255，0）；
文本阴影：.25px-.25px 1px#000；
过渡：放松；
}
.星星：悬停{
光标：指针；
过渡：放松；
文本阴影：-5px-6px 4px rgba（255,142,86,0.6）；
}
输入。星形：选中~标签。星形：悬停{
过渡：放松；
文本阴影：-5px-6px 4px rgba（255,142,86,0.6）；
}
label.star：：之前{
内容：“\f005”；
/*⭐} 可选但推荐*/
颜色：#e74c3c；
过渡：全部为0.25秒；
字体系列：“字体真棒5免费”；
/*⭐} 通过降低字体重量，图标就是一个轮廓*/
字体大小：400；
字体大小：32px；
}
input.star:选中~label.star:：before{
内容：'\f005'；
颜色：#e74c3c；
过渡：全部为0.25秒；
字体系列：“字体真棒5免费”；
字号：900；
}

如果您使用的是JS+SVG版本，请阅读以下内容：

常规版和实体版之间的区别在于
字体重量
。您只需调整此选项即可在两个版本之间切换：


input.star:选中~label.star:之前{
内容：'\f005'；
颜色：#e74c3c；
过渡：全部为0.25秒；
字体系列：“字体真棒5免费”；
字号：900；
}
明星：之前{
内容：'\f005'；
字体系列：“字体真棒5免费”；
字号：200；
}
另外，值得注意的是，除了
f005
实心星形外，FontAwesome还有unicode
f006
，这是一个空星形。至少在我使用的版本中是这样

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