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图标。

我正在尝试从日出日历中模拟这种效果：

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

天哪，太可怕了。

这是它通常的样子：

有什么想法可以保留文本大小和属性，而且还可以在文本之前呈现一个漂亮的圆圈（不是项目符号，因为它太小而无法达到预期的效果）？其次，我还有一个变量叫做：

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

Answer 1

● ← 使用 unicode circle 怎么样？

它比项目符号点 (•) 大一点。

Unicode 圆圈的 HTML 实体是●.

Answer 2

之后，Material Design 图标集为文本添加了奇怪的样式，所以我最终使用了一个自定义字形图标，如下所示，并将其放入一个span内联样式中。

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

相信我，我对使用内联样式感觉很糟糕，但是我想不出任何其他方式来为glyphicon-dot类分配颜色，因为每个事件都有自己的颜色属性。