Search code examples
javascripthtmlcsstwitter-bootstrapbootstrap-material-design

Rendering a circle before unordered list text using CSS

Trying to put a Material Design CSS font in front of my text using the following jQuery:

    // Build the unordered list of classes with their name and CRN
    var text = '';
    text += '<ul class="list-group class-cart">';
    for (i = 0; i < result.classes[index].length; i++) {
        text += '<li class="list-group-item mdi-image-lens">' + result.classes[index][i]['short_name'] + ' (' + result.classes[index][i]['crn'] + ')</li>';
    }
    text += '</ul>';

I am using this library: http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

In particular, the mdi-image-lens icon.

I am trying to emulate this effect from Sunrise Calendar:

enter image description here

Doing that, this is what I received:

enter image description here

Oh God, it's hideous.

This is what it normally looks like:

enter image description here

Any ideas how I can preserve the text size and properties, but also render a nice looking circle (not bullet point, since it's too small to achieve the desired effect) right before the text? Secondly, I also have a variable called:

result.classes[index][i]['color'] which has a hex color value. I would like to use this hex value as the color of the circle.

Solution

  • The Material Design icon sets added weird stylings to the text afterwards, so I ended up using a custom glyphicon like the following and put it in a span with an in-line style. 

     * Circle glyphicon */
.glyphicon.glyphicon-dot:before {
  content: "\25cf";
  font-size: 1.7em;
}

    Trust me, I feel terrible about using an in-line style, but I couldn't think of any other way to assign color to the glyphicon-dot class on since each event has its own color attribute.