Rendering a circle before unordered list text using CSS

Question

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:

Doing that, this is what I received:

Oh God, it's hideous.

This is what it normally looks like:

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.

score 1 · Answer 1 · answered Aug 22 '15 at 01:57

1

● ← How about using a unicode circle?

It's a bit bigger than the bullet point (•).

HTML entity for the unicode circle is ●.

answered Aug 22 '15 at 01:57

Maximillian Laumeister

19,884
8
59
78

Not bad. How would I apply a color JUST to this? – theGreenCabbage Aug 22 '15 at 01:58
I would wrap it in a span, and style the span, like this: **HTML:** `←` **CSS:** `.bullet {color: red}`. – Maximillian Laumeister Aug 22 '15 at 01:59
@theGreenCabbage Hah, looks gorgeous! Glad I could help, and glad you got it working! – Maximillian Laumeister Aug 22 '15 at 02:05
@DavidThomas Very much appreciated, though remember theGreenCabbage still has 2 more minutes to go until he is allowed to do that! (15min no-acceptance period after a question is asked). – Maximillian Laumeister Aug 22 '15 at 02:07
@DavidThomas Same reason Maximillian said. I couldn't accept it yet. – theGreenCabbage Aug 22 '15 at 02:14
One minor question. If you look at this clearly, the bottom is slightly cut off: http://puu.sh/jJZDo/7882ae7f04.png I looked at the `Computed` and toggled a few items on and off, but couldn't get rid of that cut off. I even put in a `margin-bottom`. – theGreenCabbage Aug 22 '15 at 02:21
@theGreenCabbage Try reducing the font size for the span a little bit. – Maximillian Laumeister Aug 22 '15 at 02:22
It looks like the unicode letter doesn't work on Windows 7 Chrome :/ – theGreenCabbage Aug 22 '15 at 04:15
@theGreenCabbage Then it looks like it's [time for plan B!](https://jsfiddle.net/81ndup4h/1/) – Maximillian Laumeister Aug 22 '15 at 04:19

score 1 · Accepted Answer · answered Aug 27 '15 at 21:19

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.

Rendering a circle before unordered list text using CSS

2 Answers2