如何更改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; }
您可以调整颜色和边距以适应您的字体大小和口味。
原文地址:https://www.jb51.cc/bootstrap/234447.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。