Как использовать значки для элементов Li? ⇐ Html

[Anonymous]

Я использовал GitHub mopoilot, чтобы сгенерировать компонент шагового уровня с использованием CSS, и он придумал хорошее начало, но я хотел бы дополнительные изменения в CSS. Поскольку я довольно новичок в CSS, у меня есть некоторые проблемы, внедряющие следующее: < /p>

• Вместо этого используйте значки (например, fa-check-circle < /code> Для выполненных шагов и Fa-Circle для текущих и следующих шагов
• Компонент шагового уровня должен растягиваться, чтобы соответствовать своему родительскому контейнеру и не имеет фиксированной длины линии
• должен выполнить шаги (Значок и линия) в зеленом и током и следующих шагах в сером

Как я могу реализовать вышеупомянутые с незначительными изменениями в 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;
}< /code>

[list]
[*]Step 1
[*]Step 2
[*]Step 3
[*]Step 4
[*]Step 5
[/list]

Подробнее здесь: https://stackoverflow.com/questions/794 ... i-elements