FontAwesome CSS 星半评级

Question

我正在使用 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>

Answer 1

不修改 html 就无法修改它。只需将需要的图标替换为

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

Answer 2

这是一个纯粹的 CSS 解决方案。使用的是FA4 ATM，不过我会return升级到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: '[=10=]00bd';
    }
    /* 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>

FontAwesome CSS 星半评级

FontAwesome CSS Stars Half Rating

html

css

font-awesome