FontAwesome CSS Stars Half Rating-CodePudding

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 ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>

CodePudding user response：

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

<i ></i>

CodePudding user response：

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"  name="rad" type="radio">
      <label for="rad5" ></label>
      <input id="rad4"  name="rad" type="radio">
      <label for="rad4" ></label>
      <input id="rad3"  name="rad" type="radio">
      <label for="rad3" ></label>
      <input id="rad2"  name="rad" type="radio">
      <label for="rad2" ></label>
      <input id="rad1"  name="rad" type="radio">
      <label for="rad1" ></label>
    </fieldset>
  </section>
</body>

</html>