How to use icons for li elements?

I used Github Copoilot to generate a stepper component using CSS and it came up with a good start but I would like additional changes to the CSS. As I'm fairly new to CSS, I have some problems implementing the following:

Use icons instead (eg. fa-check-circle for completed steps and fa-circle for current and next steps
The stepper component should stretch to fit its parent container and not having fixed line length
Should completed steps (icon and line) in green and current and next steps in gray

How can I implement the above with minor changes to the CSS?

.container {
  width: 100%;
  z-index: -1;
}

.progressbar li {
  list-style-type: none;
  width: 10%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  color: #666666;
}

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #666666;
  top: 15px;
  left: -50%;
  display: block;
  z-index: -999999;
}

.progressbar li:before {
  width: 30px;
  height: 30px;
  content: '';
  line-height: 30px;
  border: 2px solid #666666;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  z-index: 999999;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  color: green;
  border-color: green;
}

.progressbar li.active+li:after {
  background-color: #808080;
}

<div class="container">
  <ul class="progressbar">
    <li>Step 1</li>
    <li class="active">Step 2</li>
    <li>Step 3</li>
    <li>Step 4</li>
    <li>Step 5</li>
  </ul>
</div>

Solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style>
      .container {
        width: 100%;
        z-index: -1;
      }

      .progressbar li {
        list-style-type: none;
        width: 10%;
        float: left;
        font-size: 12px;
        position: relative;
        text-align: center;
        color: #666666;
      }

      .progressbar li:after {
        width: 100%;
        height: 2px;
        content: "";
        position: absolute;
        background-color: #666666;
        top: 15px;
        left: -50%;
        display: block;
        z-index: -999999;
      }

      .progressbar li:before {
        width: 30px;
        height: 30px;
        content: "";
        line-height: 30px;
        border: 2px solid #666666;
        display: block;
        text-align: center;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        background-color: white;
        z-index: 999999;
      }

      .progressbar li:first-child:after {
        content: none;
      }

      .progressbar li.active {
        color: green;
      }

      .progressbar li.active:before {
        color: green;
        border-color: green;
      }

      .progressbar li.checked::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f058";
        color: green;
        font-size: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .progressbar li.active + li:after {
        background-color: #808080;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul class="progressbar">
        <li class="checked">Step 1</li>
        <li class="active">Step 2</li>
        <li>Step 3</li>
        <li>Step 4</li>
        <li>Step 5</li>
      </ul>
    </div>
  </body>
</html>