如何为li元素使用图标？CSS步进器组件优化实现咨询

需求回顾 #

• 使用Font Awesome图标替代默认样式：已完成步骤用fa-check-circle，当前及后续步骤用fa-circle
• 步进器自适应父容器宽度，取消固定长度限制
• 已完成步骤（图标及连线）设为绿色，当前及后续步骤设为灰色

关键修改说明 #

1. 集成Font Awesome图标库：确保项目中已引入Font Awesome（可通过本地文件或内嵌样式表实现）
2. 改用Flex布局实现自适应：替换原float布局为flex，让步进器自动均分父容器宽度
3. 替换伪元素内容为图标Unicode：利用Font Awesome的字符编码替换原有的圆形边框样式
4. 颜色规则调整：针对已完成、当前、后续步骤分别设置图标和连线的颜色

修改后的完整代码 #

HTML代码

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

CSS代码

.container {
  width: 100%;
}

.progressbar {
  display: flex;
  padding: 0;
  margin: 0;
}

.progressbar li {
  list-style-type: none;
  flex: 1;
  font-size: 12px;
  position: relative;
  text-align: center;
  color: #808080; /* 灰色文字 */
}

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #808080; /* 默认灰色连线 */
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:before {
  width: 30px;
  height: 30px;
  line-height: 30px;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #808080; /* 默认灰色图标 */
  z-index: 1;
}

/* 已完成步骤样式 */
.progressbar li.completed:before {
  content: '\f058'; /* fa-check-circle 图标编码 */
  color: green;
}

.progressbar li.completed:after {
  background-color: green;
}

.progressbar li.completed {
  color: green;
}

/* 当前步骤样式 */
.progressbar li.active:before {
  content: '\f111'; /* fa-circle 图标编码 */
}

/* 第一个步骤的连线隐藏 */
.progressbar li:first-child:after {
  content: none;
}

样式逻辑说明 #

• 自适应布局：progressbar使用display: flex，每个li设置flex:1，自动均分父容器宽度，无需固定百分比
• 图标替换：通过伪元素的content属性设置Font Awesome的Unicode编码，配合指定字体族实现图标显示
• 颜色控制：已完成步骤（.completed）的图标和连线设为绿色，默认（后续）和当前步骤（.active）设为灰色，符合需求

内容的提问来源于stack exchange，提问作者Ivan Debono