twitter-bootstrap 使用 Glyphicon 作为 LI 要点（引导程序 3）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31196980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using a Glyphicon as an LI bullet point (Bootstrap 3)
提问by Simon East
How can I change the bullet points in an HTML list and use the glyphicons that come with Bootstrap 3?
如何更改 HTML 列表中的项目符号并使用 Bootstrap 3 附带的字形？
So that:
以便：
<ul>
<li>...</li>
<li>...</li>
</ul>
Displays as:
显示为：
[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.
I would prefer notto have to inject extra HTML such as this...
我宁愿不必像这样注入额外的 HTML...
<ul>
<li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
<li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
</ul>
回答by Simon East
This isn't too difficult with a little CSS, and is muchbetter than using an image for the bullet since you can scale it and colour it and it will keep sharp at all resolutions.
使用一点 CSS 并不太难，而且比使用图像作为项目符号要好得多，因为您可以对其进行缩放和着色，并且在所有分辨率下都能保持清晰。
Find the character code of the glyphicon by opening the Bootstrap docsand inspecting the character you want to use.
Use that character code in the following 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; }You may like to tweak the colour and margins to suit your font size and taste.
通过打开Bootstrap 文档并检查要使用的字符来查找字形的字符代码。
在以下 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
查看演示和代码
回答by FastTrack
If anyone is coming here looking to do this with Font Awesome Icons (like I was) view here: https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list
如果有人来这里希望使用 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>
The fa-uland fa-liclasses easily replace default bullets in unordered lists.
在fa-ul和fa-li类容易更换无序列表默认子弹。
回答by Caumons
I'm using a simplyfied version (just using position relative) based on @SimonEast answer:
我正在使用基于@SimonEast 答案的简化版本（仅使用相对位置）：
li:before {
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
position: relative;
margin-right: 10px;
top: 3px;
color: #ccc;
}
回答by Damien B
If you want happen to be using LESS it can be achieved like so:
如果您想碰巧使用 LESS，则可以像这样实现：
li {
.glyphicon-ok();
&:before {
.glyphicon();
margin-left:-25px;
float:left;
}
}
回答by bskool
If you want to have a different icon for each list-item, I suggest adding icons in HTML instead of using a pseudo element to keep your CSS down. It can be done quite simply as follows:
如果您想为每个列表项使用不同的图标，我建议在 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;
}
In this case I used Material Design Icons
在这种情况下，我使用了Material Design Icons
回答by Bob.at.Indigo.Health
Using Font Awesome 5, the markup is a bit more complex than the previouis answer. Per the FA documentation, the markup should be:
使用 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>
