使用 CSS 在无序列表文本之前呈现一个圆圈

Question

尝试使用以下 jQuery:

在我的文本前面放置 Material 设计 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圆圈怎么样？

比圆点(•)大一点。

HTML unicode 圈的实体是 ●。

Answer 2

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

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

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

使用 CSS 在无序列表文本之前呈现一个圆圈

Rendering a circle before unordered list text using CSS

javascript

html

css

twitter-bootstrap

bootstrap-material-design