twitter-bootstrap – 使用Glyphicon作为L1项目符号(Bootstrap 3

发布时间：2020-12-18 00:08:00 所属栏目：安全来源：网络整理

导读：如何更改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 te

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

解决方法

这不是太困难与一个小的CSS，并且比使用图像的子弹要好得多，因为你可以缩放和颜色，它将保持清晰的所有分辨率。

>通过打开Bootstrap docs并检查要使用的字符，找到字形的字符代码。

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

您可以调整颜色和边距以适应您的字体大小和口味。

View Demo & Code

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!