首页 > web前端 > css教程 > 如何将 Font Awesome 5 Unicode 用于常规和实心星星?

如何将 Font Awesome 5 Unicode 用于常规和实心星星?

Linda Hamilton
发布: 2024-10-24 14:38:02
原创
639 人浏览过

How to Use Font Awesome 5 Unicode for Regular and Solid Stars?

Font Awesome 5 Unicode(用于常规和实心星星)

Font Awesome 5 引入了用于常规和实心星星的“far”和“fas”前缀图标,分别。虽然两个前缀具有相同的 Unicode ('f005'),但它们代表不同的字体粗细。在 CSS 中使用它们时,理解这种区别至关重要。

在您的代码片段中,您提到您只能获得实心星星。这是因为您已将选中和未选中星形状态的字体粗细设置为 900。为了实现预期的行为,让普通星星最初在点击时变得稳定,您需要相应地调整字体粗细。

下面更新的 CSS 可以处理这个问题:

<code class="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: 200;
}</code>
登录后复制

在如上所述,选中的星形状态的字体粗细保持在 900,从而形成实心星形。然而,对于未选中的状态,font-weight 设置为 200,从而产生常规的星号。此设置可确保单击时星星在常规和实心之间变化。

以上是如何将 Font Awesome 5 Unicode 用于常规和实心星星?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板