Using Glyphicon as a Bullet Point

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<ul>
    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</li>
    <li>Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia.</li>
    <li>Qui officia deserunt mollit anim id est laborum.</li>
</ul>
    
<ul class="custom-bullet">
    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</li>
    <li>Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia.</li>
    <li>Qui officia deserunt mollit anim id est laborum.</li>
</ul>

CSS

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
        
.custom-bullet li {
    display: block;
}

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