How can I change the bullet points in an HTML list and use the glyphicons that come with 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 not to have to inject extra HTML such as this...
<ul>
<li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
<li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
</ul>
This question is related to
twitter-bootstrap
twitter-bootstrap-3
glyphicons
bulletedlist
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
<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-ul
and fa-li
classes easily replace default bullets in unordered lists.
If you want happen to be using LESS it can be achieved like so:
li {
.glyphicon-ok();
&:before {
.glyphicon();
margin-left:-25px;
float:left;
}
}
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:
<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
Using Font Awesome 5, the markup is a bit more complex than the previouis answer. Per the FA documentation, the markup should be:
<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>
I'm using a simplyfied version (just using position relative) based on @SimonEast answer:
li:before {
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
position: relative;
margin-right: 10px;
top: 3px;
color: #ccc;
}
Source: Stackoverflow.com