Using a .glyphicon as a list bullet point icon

Let's say you need to use a bootstrap's glyphicon as an <ul> bullet-point icon. You can try going with li:before:

li:before {
    content: "\e013";
}

But I think there's a problem with this: you'll have to re-declare (copy-paste) the icon's style into your own CSS file. You'll basically hardcode the Glyphicons Halflings font name and it's internal icon code (\e013 in the example above). If Boostrap, for whatever reason, changes that in the future, your HTML and CSS would have to be updated accordingly.

Here's what I did to avoid that:

<ul class="list-unstyled">
    <li>
        <i class="glyphicon glyphicon-ok"></i>
        Hello
    </li>
    <li>
        <i class="glyphicon glyphicon-ok"></i>
        World!
    </li>
</ul>

ul {
    margin-left: 17px;
}
ul li i.glyphicon {
    margin-left: -17px;
}