javascript - 使用 CSS 在无序列表文本之前渲染一个圆圈

Question

尝试使用以下 jQuery 在我的文本前面放置 Material Design CSS 字体:

    // 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>';

我正在使用这个库:http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

特别是 mdi-image-lens 图标。

我正在尝试从 Sunrise Calendar 中模拟这种效果:

这样做，这就是我收到的:

天哪，太可怕了。

这是它通常的样子:

有什么想法可以保留文本大小和属性，同时在文本之前呈现一个漂亮的圆圈(不是圆点，因为它太小而无法达到预期的效果)？其次，我还有一个变量叫做:

result.classes[index][i]['color'] 具有十六进制颜色值。我想使用这个十六进制值作为圆圈的颜色。

Answer 1

● ← 使用 unicode 圆怎么样？

它比圆点 (•) 大一点。

unicode 圈的 HTML 实体是 ●。