Using a Glyphicon as an LI bullet point (Bootstrap 3)

Question

How can I change the bullet points in an HTML list and use the glyphicons that come with Bootstrap 3?

So that:

Answer 1

If you want to have a different icon for each list-item, I suggest adding icons in HTML instead of using a pseudo element to keep your CSS down. It can be done quite simply as follows:

  
An electric light with a wire filament heated to such a high temperature that it glows with visible light
  
A thin, rigid board with a clip at the top for holding paper in place.
  
A graphical representation of data, in which the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart.
  
A system that responds to requests across a computer network worldwide to provide, or help to provide, a network or data service.

-

ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0;
}
ul>li {
  position: relative;
}
span {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit;
}

In this case I used Material Design Icons

VIEW DEMO