45

如何更改 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>
4

6 回答 6

117

使用一点 CSS 并不太难，并且比使用图像作为子弹要好得多，因为您可以对其进行缩放和着色，并且它会在所有分辨率下保持清晰。

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

    检查字形图标

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

    您可能想调整颜色和边距以适合您的字体大小和品味。

查看演示和代码

于 2015-07-03T01:03:51.953 回答
36

如果有人来这里希望使用 Font Awesome Icons（就像我一样）在此处查看：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类很容易替换无序列表中的默认项目符号。

于 2016-03-25T17:51:11.880 回答
10

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

li:before {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    position: relative;
    margin-right: 10px;
    top: 3px;
    color: #ccc;
}
于 2015-11-25T16:13:54.953 回答
1

如果您想碰巧使用 LESS，则可以这样实现：

li {
    .glyphicon-ok();

    &:before {            
        .glyphicon();            
        margin-left:-25px;
       float:left;
    }
}
于 2017-04-26T10:18:38.953 回答
1

使用 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>
于 2019-01-04T05:09:03.337 回答
1

如果您想为每个列表项设置不同的图标，我建议在 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

查看演示

于 2018-09-21T08:39:56.940 回答