从 bootstrap 列表中删除单个项目符号图标

Question

我有一个 Bootstrap 列表组，我用图标添加了项目符号。我正在尝试从列表组中删除第一个图标。我怎样才能做到这一点？这是我的代码：

<ul class="list-group" id="vacationList">
              <li class="list-group-item text-center" id="vacationListTitle">Our in-home pet care includes the following care treatment:</li>
              <li class="list-group-item">All the love, attention, kissing and scracthing your pet deserves</li>
              <li class="list-group-item">Walk, exercise, playtime or visit</li>
              <li class="list-group-item">Food, treats and fresh water as needed</li>
              <li class="list-group-item">Trash and pet waste removal</li>
              <li class="list-group-item">The administration of medicine</li>
              <li class="list-group-item">Gathering of of all mail</li>
              <li class="list-group-item">Watering of all plants and garden</li>
              <li class="list-group-item">Report card including the time of the visit and details of the pet care experience</li>
              <li class="list-group-item">In additional we are prepared to accomodate any other unlisted and reasonable needs</li>
              <li class="list-group-item"> includes overnight stay from 8:00 pm until 7:00 am and 1 late afternoon visit. Includes care for 2 pets ( per additional pet)</li>
            </ul>

#vacationListTitle {
  background-color:map-get($colorMap, orangeColor) !important;
  font-family:$headerFont;
  font-size:1.3em;
  content:none !important;
  padding-left:0px !important;
}

#vacationList {
  margin:0 auto;
  border-radius:5px;

  li {
    padding-left:30px;
  }

  li:nth-child(odd) {
    background-color:#e5e5e5;
  }

  li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -21px;
    color: #555;
  }
}

名称为 class vacationListTitle 的列表项是我要从中删除图标的项。有什么想法吗？

谢谢！

Answer 1

您可以使用 display 属性执行此操作，具体针对 ::before 伪元素：

#vacationListTitle::before {
  display: none;
}

Answer 2

您可以删除 vacationList 的第一个前面的内容

#vacationList {
    .....
    .....
    .....
    li:first-of-type:before {
      content: "";
    }
}

或者你可以直接使用id #vacationListTitle

 #vacationListTitle:before {
      content: "";
    }

See demo here

从 bootstrap 列表中删除单个项目符号图标

Removing a single bulleted icon from a bootstrap list

css

pseudo-element

twitter-bootstrap