FontAwesome CSS 星星半评级

发布于 2025-01-20 03:06:26 字数 731 浏览 2 评论 0原文

我正在使用 FontAwesome 显示一些星星并为它们着色。

如何仅使用 CSS 为 5 颗星中的 4 颗半星着色？目前我只能给它们全部着色。

我当前的 CSS 和 HTML 代码如下。

.checked {
  color: orange;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>

原文

I'm using FontAwesome to display some stars and colour them

How can I colour 4 and a half stars out of 5 using CSS only? Currently I'm only able to colour them all.

My current CSS and HTML code is below.

.checked {
  color: orange;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

春庭雪 2025-01-27 03:06:26

如果不修改HTML，则不能修改它。
只需将所需图标替换为

<i class="fa-solid fa-star-half"></i>

You cannot modify that without modifying the html.
Just replace the needed icon with

<i class="fa-solid fa-star-half"></i>

回复收藏 0 原文

请爱~陌生人 2025-01-27 03:06:26

这是纯CSS解决方案。它正在使用FA4 ATM，但我将返回升级到FA6。

详细信息在下面的示例中评论

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <style>
    html {
      font: 2ch/1.5 'Segoe UI';
    }
    
    body {
      color: #FFB300;
      background: #000;
    }
    
    input,
    label {
      display: inline-block;
      margin-left: 10px;
      font: inherit;
      cursor: pointer;
    }
    
    .set {
      display: inline-block;
      font-size: 2rem;
      border: 1px solid #FC0;
    }
    
    .set::after {
      content: "";
      display: table;
      clear: both;
    }
    
    .star {
      float: right;
      padding-left: 2px color: #FFB300;
    }
    
    .star:last-child {
      padding-left: 0;
    }
    
    .rad,
    #chx {
      display: none;
    }
    
    .half {
      float: right;
      font-size: 1.5rem;
      vertical-align: middle;
    }
    
    .half::before {
      content: '\0000bd';
    }
    /* 1. hover over a label.star directly and display
    ||    the full gold star in the ::before pseudo
    ||    element.
    */
    /* 2. hover over a label.star and display it and all
    ||    other label.star before it as a full gold star
    */
    /* 3. check a label.star and display it and all other
    ||    label.star before it as a full gold star.
    ||    Full persistent empty stars are possible because
    ||    of the :checked pseudo-selector
    */
    
    .star:hover::before,
    .star:hover~.star::before,
    .rad:checked~.star::before {
      content: "\f005";
    }
    /* 4. click the ½ and the associated checkbox sitting outside of
    ||    the fieldset (hidden) when checked will pair up with the checked
    ||    radio which in turn changes the full star into a half star.
    */
    
    #chx:checked+.set .rad:checked+.star::before {
      content: "\f123";
    }
  </style>
</head>

<body>
  <section>
    <input id='chx' type='checkbox'>
    <fieldset class='set'>
      <legend>Rate It</legend>
      <label for='chx' class='half'></label>
      <input id="rad5" class="rad" name="rad" type="radio">
      <label for="rad5" class="star fa fa-star-o fa-lg"></label>
      <input id="rad4" class="rad" name="rad" type="radio">
      <label for="rad4" class="star fa fa-star-o fa-lg"></label>
      <input id="rad3" class="rad" name="rad" type="radio">
      <label for="rad3" class="star fa fa-star-o fa-lg"></label>
      <input id="rad2" class="rad" name="rad" type="radio">
      <label for="rad2" class="star fa fa-star-o fa-lg"></label>
      <input id="rad1" class="rad" name="rad" type="radio">
      <label for="rad1" class="star fa fa-star-o fa-lg"></label>
    </fieldset>
  </section>
</body>

</html>

This is a pure CSS solution. It is using FA4 ATM, but I will return to upgrade to FA6.

Details are commented in example below

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <style>
    html {
      font: 2ch/1.5 'Segoe UI';
    }
    
    body {
      color: #FFB300;
      background: #000;
    }
    
    input,
    label {
      display: inline-block;
      margin-left: 10px;
      font: inherit;
      cursor: pointer;
    }
    
    .set {
      display: inline-block;
      font-size: 2rem;
      border: 1px solid #FC0;
    }
    
    .set::after {
      content: "";
      display: table;
      clear: both;
    }
    
    .star {
      float: right;
      padding-left: 2px color: #FFB300;
    }
    
    .star:last-child {
      padding-left: 0;
    }
    
    .rad,
    #chx {
      display: none;
    }
    
    .half {
      float: right;
      font-size: 1.5rem;
      vertical-align: middle;
    }
    
    .half::before {
      content: '\0000bd';
    }
    /* 1. hover over a label.star directly and display
    ||    the full gold star in the ::before pseudo
    ||    element.
    */
    /* 2. hover over a label.star and display it and all
    ||    other label.star before it as a full gold star
    */
    /* 3. check a label.star and display it and all other
    ||    label.star before it as a full gold star.
    ||    Full persistent empty stars are possible because
    ||    of the :checked pseudo-selector
    */
    
    .star:hover::before,
    .star:hover~.star::before,
    .rad:checked~.star::before {
      content: "\f005";
    }
    /* 4. click the ½ and the associated checkbox sitting outside of
    ||    the fieldset (hidden) when checked will pair up with the checked
    ||    radio which in turn changes the full star into a half star.
    */
    
    #chx:checked+.set .rad:checked+.star::before {
      content: "\f123";
    }
  </style>
</head>

<body>
  <section>
    <input id='chx' type='checkbox'>
    <fieldset class='set'>
      <legend>Rate It</legend>
      <label for='chx' class='half'></label>
      <input id="rad5" class="rad" name="rad" type="radio">
      <label for="rad5" class="star fa fa-star-o fa-lg"></label>
      <input id="rad4" class="rad" name="rad" type="radio">
      <label for="rad4" class="star fa fa-star-o fa-lg"></label>
      <input id="rad3" class="rad" name="rad" type="radio">
      <label for="rad3" class="star fa fa-star-o fa-lg"></label>
      <input id="rad2" class="rad" name="rad" type="radio">
      <label for="rad2" class="star fa fa-star-o fa-lg"></label>
      <input id="rad1" class="rad" name="rad" type="radio">
      <label for="rad1" class="star fa fa-star-o fa-lg"></label>
    </fieldset>
  </section>
</body>

</html>

回复收藏 0 原文

~没有更多了~