html - 在进度条步骤中显示图像

Question

我正在尝试显示进度条。

我已将文件上传到此处 - https://jsfiddle.net/iftekhar09/7ojsz5qp/1/下面还有一个片段。

我想用图片(比如来自 font-awesome)代替数字“1”，我该如何实现？

.container {
  width: auto;
}
.task-progress-header{
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  padding: 15px;
  margin-left: 20px;
}

a {
  text-decoration: none;
  display: block;
}
.progressbar li img{
  width: 15px;
}

.progressbar {
  counter-reset: step;
}
.progressbar li {
  list-style-type: none;
  width: 14%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}
.progressbar li:before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step;
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}
.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active {
  color: green;
}
.progressbar li.active:before {
  border-color: #55b776;
}
.progressbar li.active + li:after {
  background-color: #55b776;
}

<div class="task-progress-header">Your Progress</div>
<div class="container">
  <ul class="progressbar">
<!--    <li><img src="../../../assets/calendar.svg"><br></li>-->
    <li class="active"><a href=""></a>Create Event</li>
    <li class="active"><a href="">Setup Exhibitors</a></li>
    <li class="active"><a href="">Setup Sponsors</a></li>
    <li><a href="">Add participants</a></li>
    <li><a href="">Setup Questions</a></li>
    <li>Done</li>
  </ul>
</div>

Answer 1

在 .progressbar li:before 类中使用 content:'' background:url 并给出它工作的图像 URL。希望这就是您所期待的

对于每一步的不同图像:

.container {
  width: auto;
}

.task-progress-header {
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  padding: 15px;
  margin-left: 20px;
}

a {
  text-decoration: none;
  display: block;
}

.progressbar li img {
  width: 15px;
}

.progressbar li {
  list-style-type: none;
  width: 14%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}

.progressbar li:nth-child(1):before {
  background: url(https://dummyimage.com/30x0/c0c/fff);
}

.progressbar li:nth-child(2):before {
  background: url(https://dummyimage.com/30x0/00c/fff);
}

.progressbar li:nth-child(3):before {
  background: url(https://dummyimage.com/30x0/c0/fff);
}

.progressbar li:nth-child(4):before {
  background: url(https://dummyimage.com/30x0/0fc/fff);
}

.progressbar li:nth-child(5):before {
  background: url(https://dummyimage.com/30x0/f0c/fff);
}

.progressbar li:nth-child(6):before {
  background: url(https://dummyimage.com/30x0/002/fff);
}

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

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

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

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  border-color: #55b776;
}

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

<div class="task-progress-header">Your Progress</div>
<div class="container">
  <ul class="progressbar">
    <!--    <li><img src="../../../assets/calendar.svg"><br></li>-->
    <li class="active">
      <a href=""></a>Create Event</li>
    <li class="active"><a href="">Setup Exhibitors</a></li>
    <li class="active"><a href="">Setup Sponsors</a></li>
    <li><a href="">Add participants</a></li>
    <li><a href="">Setup Questions</a></li>
    <li>Done</li>
  </ul>
</div>

每一步都使用相同的图片:

.container {
  width: auto;
}

.task-progress-header {
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  padding: 15px;
  margin-left: 20px;
}

a {
  text-decoration: none;
  display: block;
}

.progressbar li img {
  width: 15px;
}

.progressbar li {
  list-style-type: none;
  width: 14%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}
.progressbar li:before {
  background: url(https://dummyimage.com/30x0/002/fff);
}

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

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

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

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  border-color: #55b776;
}

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

<div class="task-progress-header">Your Progress</div>
<div class="container">
  <ul class="progressbar">
    <!--    <li><img src="../../../assets/calendar.svg"><br></li>-->
    <li class="active">
      <a href=""></a>Create Event</li>
    <li class="active"><a href="">Setup Exhibitors</a></li>
    <li class="active"><a href="">Setup Sponsors</a></li>
    <li><a href="">Add participants</a></li>
    <li><a href="">Setup Questions</a></li>
    <li>Done</li>
  </ul>
</div>