Twitter bootstrap 使用字形图标作为LI项目符号（引导3）

如何更改HTML列表中的项目符号并使用Bootstrap3附带的图标

以便：

显示为：

[icon]Facere possimus，omnis voluptas assumenda est，numquam eius modi
奥姆尼斯多洛驱虫剂。非numquam eius modi numam dolor omnis
临时工。
[图标]Facere possimus，omnis voluptas assumenda est，numquam eius modi
奥姆尼斯多洛驱虫剂。非numquam eius modi numam dolor omnis
临时工。

我宁愿不必须注入像这样的额外HTML

使用一点CSS，这并不太困难，而且比为项目符号使用图像要好得多，因为您可以对其进行缩放和着色，并且在所有分辨率下都能保持清晰

通过打开并检查要使用的字符，查找glyphicon的字符代码

在下面的CSS中使用该字符代码

li {
    display: block;
}

li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: #CCCCCC;
}

你可能想调整颜色和边距以适应你的字体大小和口味

---

我正在使用基于@SimonEast答案的简化版本（仅使用相对位置）：

li:before {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    position: relative;
    margin-right: 10px;
    top: 3px;
    color: #ccc;
}

---

如果有人来这里想用字体很棒的图标（像我一样）来做这件事，请在这里查看：

列表图标
可以使用
像子弹一样
列表中

---

fa-ul

和

fa-li

类可以轻松替换无序列表中的默认项目符号。

如果您想使用更少的项目符号，可以这样实现：

li {
    .glyphicon-ok();

    &:before {            
        .glyphicon();            
        margin-left:-25px;
       float:left;
    }
}

---

如果您想为每个列表项添加不同的图标，我建议在HTML中添加图标，而不是使用伪元素来抑制CSS。可以非常简单地如下所示：

<ul>
  <li><span><i class="mdi mdi-lightbulb-outline"></i></span>An electric light with a wire filament heated to such a high temperature that it glows with visible light</li>
  <li><span><i class="mdi mdi-clipboard-check-outline"></i></span>A thin, rigid board with a clip at the top for holding paper in place.</li>
  <li><span><i class="mdi mdi-finance"></i></span>A graphical representation of data, in which the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart.</li>
  <li><span><i class="mdi mdi-server"></i></span>A system that responds to requests across a computer network worldwide to provide, or help to provide, a network or data service.</li>
</ul>

在这种情况下，我使用

---

使用字体Awesome 5，标记比前面的答案要复杂一些。根据，标记应为：

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

可以列出图标
习惯于
替换子弹
列表中

不幸的是，这不适用于引导。字体很棒的样式不能很好地与Bootstrap配合使用。@3noch“不能与Bootstrap配合使用”是什么意思？上面提到的字形图标不起作用，这就是为什么我提到“如果你想用很棒的字体图标来做这件事”。是的，你是对的。原来是别的什么东西打破了我的想法，但它似乎自己起作用了。谢谢。@FastTrack-如何使这个内嵌（水平）的工作像一个魅力。但它加载异步。在您的示例中，边距和填充的使用有什么区别吗？使用此方法时要记住的一点是，除非对伪元素之前的

应用负边距，否则它将破坏缩进。看起来很不错，但如何做到这一点而不会弄乱导航栏？
ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0;
}
ul>li {
  position: relative;
}
span {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit;
}

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>