使用Glyphicon作为LI项目符号（Bootstrap 3）

Question

如何更改HTML列表中的标志点，并使用Bootstrap 3附带的字体图标？

以便实现以下效果：

<ul>
    <li>...</li>
    <li>...</li>
</ul>

显示为：

 [icon]  Facere possimus, omnis voluptas assumenda est, numquam eius modi
         omnis dolor repellendus. Non numquam eius modi numam dolor omnis 
         tempora incidunt ut labore.

 [icon]  Facere possimus, omnis voluptas assumenda est, numquam eius modi
         omnis dolor repellendus. Non numquam eius modi numam dolor omnis 
         tempora incidunt ut labore.

我更喜欢不必须注入额外的HTML，例如这样...

<ul>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
</ul>

- Simon East

Answer 1

只需一点 CSS 就可以轻松实现，比使用图像作为项目符号要好得多，因为你可以对其进行缩放和着色，并且在所有分辨率下都能保持清晰。

1. 通过打开 Bootstrap 文档 并检查您想要使用的字符来查找 glyphicon 的字符代码。

   

2. 在以下 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;
}

你可能希望调整颜色和边距以适应你的字体大小和喜好。

查看演示及代码

- Simon East

---

在您的示例中，使用边距和填充是否有任何区别？ - Gabe Hiemstra

使用这种方法需要记住的一件事情是，如果不在 before 伪元素上应用负 margin，它会破坏缩进。 - chrBrd

看起来非常不错，但是如何在不弄乱导航栏的情况下完成这个呢？ - ChrVik

Answer 2

如果有人想使用 Font Awesome 图标来做这件事（就像我一样），请查看此处：https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

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

- FastTrack

---

不幸的是，这与Bootstrap不兼容。Font-Awesome样式与Bootstrap的样式不协调。 - Elliot Cameron

@3noch，您说的“不适用于Bootstrap”是什么意思？上面的代码不能和Glyphicons一起使用，因此我提到了“如果您想使用Font Awesome图标来实现这一点”。 - FastTrack

是的，你说得对。事实证明其他问题导致了我的错误，但它似乎单独运行是有效的。谢谢。 - Elliot Cameron

@FastTrack - 这个能不能横向内联呢？ - user244394

运行得非常好。但它是异步加载的。 - Pulkit Sharma

哦，这一定是随着 Font Awesome 5 的更改而发生的。此答案中的标记会导致项目符号与相关文本垂直居中不正确。请参见我的答案以获取 FA 5 标记。 - Bob.at.Indigo.Health

Answer 3

我正在使用一个基于@SimonEast答案的简化版本（只使用相对定位）：

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

- Caumons

Answer 4

如果您希望每个列表项都有不同的图标，我建议在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>

-

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;
}

在这个例子中，我使用了Material Design Icons

查看演示

- bskool

Answer 5

使用 Font Awesome 5，标记语言比之前的答案要更加复杂。根据 FA 文档，标记应该是：

<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>

- Bob.at.Indigo.Health

Answer 6

如果你正在使用LESS，可以这样实现：

li {
    .glyphicon-ok();

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

- Damien B