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

I'm using a simplified version (just using position relative) based on @SimonEast answer:

li:before {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    position: relative;
    margin-right: 10px;
    top: 3px;
    color: #ccc;
}

This isn't too difficult with a little CSS, and is much better than using an image for the bullet since you can scale it and colour it and it will keep sharp at all resolutions.

1. Find the character code of the glyphicon by opening the Bootstrap docs and inspecting the character you want to use.

   

2. Use that character code in the following CSS

   li {
       display: block;
   }
   
   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: -17px;
       color: #CCCCCC;
   }
   

   You may like to tweak the colour and margins to suit your font size and taste.

View Demo & Code

If anyone is coming here looking to do this with Font Awesome Icons (like I was) view here: https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

The fa-ul and fa-li classes easily replace default bullets in unordered lists.