html - 如何让选中的图标进入我的进度条

Question

我是前端编码的新手。我刚刚通过复制此处的 css 在我的网页中添加了一个进程栏 http://kodhus.com/newsite/step-progress-bar-css-only .现在我需要将 balls 中的数字替换为“选中”图标。我有一张选中图标的 jpg 图片，但我没有努力证明它有效:

.progressbar li:before {
  width: 30px;
  height: 30px;
  /*content:url('checked2.jpg');*/
  /*content: counter(step); */
  content: 'v';
  /*class: glyphicon glyphicon-ok;
  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;
}

我尝试将我的 jpg 存储到 django 根目录、静态目录和模板目录中，但它们都不起作用。运行上面的代码，我得到了 'v' 进入我的球，它对所有人来说都是如此。

将上面的定义改为

.progressbar li:before {
width: 30px;
height: 30px;
content: '';
counter-increment: step;
line-height: 27px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
background: (https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTLB-KSrRyq61FczWe9AUdEdz2GJfs51oNKuiF_c3dfkRH23Ii9);
background-size: cover;
background-repeat-y: no-repeat;
background-position: center center;
/* z-index: 1111; */
}

我设法让 checked-icon 进入每个圈子(li-element)。

但实际上我只需要检查某些 li 元素。 我在 jquery 中尝试了以下操作，但它根本不起作用(它似乎绘制了一个新圆圈而不是修改现有的圆圈，并且选中的图像不再适合圆圈)

修改前的 CSS:

.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;
  }

html:

    <div class="container">
  <ul class="progressbar">
      <li id="first">login</li>
      <li id="second" class="active">choose interest</li>
      <li id="third">add friends</li>
      <li id="fourth">View map</li>
 </ul> 

jquery 将 checked-sign 添加到第一个 li 元素中

$("#first").css('content',''); 
$("#first").css('background', '(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTLB-KSrRyq61FczWe9AUdEdz2GJfs51oNKuiF_c3dfkRH23Ii9)'); 
$("#first").css('background-size','cover'); 
$("#first").css('background-repeat-y','no-repeat'); 
$("#first").css('background-position','center center');

Answer 1

试试这个

.progressbar li:before {
    width: 30px;
    height: 30px;
    content: '';
    counter-increment: step;
    line-height: 27px;
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTLB-KSrRyq61FczWe9AUdEdz2GJfs51oNKuiF_c3dfkRH23Ii9);
    background-size: cover;
    background-repeat-y: no-repeat;
    background-position: center center;
    /* z-index: 1111; */
}

注意删除多余的样式。