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

[Anonymous]

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

[*] Вместо этого используйте значки (например, fa-check-circle < /code> Для выполненных шагов и Fa-Circle для текущих и следующих шагов
[*] Компонент шагового уровня должен растягиваться, чтобы соответствовать своему родительскому контейнеру и не имеет фиксированной длины линии
[*] Должен выполнить шаги (значок и строка) в зеленом и текущем и следующих шагах в Grey < /li>
< /ol>
Как я могу реализовать вышеупомянутые с незначительными изменениями к CSS? Lang-CSS PrettyPrint-Override ">

Код: Выделить всё

.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