twitter-bootstraptwitter-bootstrap-3glyphiconsbulletedlist

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

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

So that:

<ul>
    <li>...</li>
    <li>...</li>
</ul>

Displays as:

 [icon]  Facere possimus, omnis voluptas assumenda est, numquam eius modi
         omnis dolor repellendus. Non numquam eius modi numam dolor omnis 
         tempora incidunt ut labore.

 [icon]  Facere possimus, omnis voluptas assumenda est, numquam eius modi
         omnis dolor repellendus. Non numquam eius modi numam dolor omnis 
         tempora incidunt ut labore.

I would prefer not to have to inject extra HTML such as this...

<ul>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
</ul>
Solution

  • 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.

      Inspecting a glyphicon

    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