Using a Glyphicon as an LI bullet point Bootstrap 3

Question

How can I change the bullet points in an HTML list and use the glyphicons that come with Bootstrap 3   So that    lt ul gt       lt li gt     lt  li gt       lt li gt     lt  li gt   lt  ul gt    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      lt ul gt       lt li gt  lt i class  glyphicon glyphicon-chevron-right  gt  lt  i gt      lt  li gt       lt li gt  lt i class  glyphicon glyphicon-chevron-right  gt  lt  i gt      lt  li gt   lt  ul gt

User · Answer

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

VIEW DEMO

User · Answer

This isn t too difficult with a little CSS  and is much better than using an image for the bullet since you can scale it and colour it and it will keep sharp at all resolutions    Find the character code of the glyphicon by opening the Bootstrap docs and 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    View Demo  amp  Code

User · Answer

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

User · Answer

If you want happen to be using LESS it can be achieved like so   li        glyphicon-ok          amp  before                        glyphicon                        margin-left -25px         float left

User · Answer

Using Font Awesome 5  the markup is a bit more complex than the previouis answer   Per the FA documentation  the markup should be   lt ul class  quot fa-ul quot  gt     lt li gt  lt span class  quot fa-li quot  gt  lt i class  quot fas fa-check-square quot  gt  lt  i gt  lt  span gt List icons can lt  li gt     lt li gt  lt span class  quot fa-li quot  gt  lt i class  quot fas fa-check-square quot  gt  lt  i gt  lt  span gt be used to lt  li gt     lt li gt  lt span class  quot fa-li quot  gt  lt i class  quot fas fa-spinner fa-pulse quot  gt  lt  i gt  lt  span gt replace bullets lt  li gt     lt li gt  lt span class  quot fa-li quot  gt  lt i class  quot far fa-square quot  gt  lt  i gt  lt  span gt in lists lt  li gt   lt  ul gt

User · Answer

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   lt ul class  fa-ul  gt     lt li gt  lt i class  fa-li fa fa-check-square  gt  lt  i gt List icons lt  li gt     lt li gt  lt i class  fa-li fa fa-check-square  gt  lt  i gt can be used lt  li gt     lt li gt  lt i class  fa-li fa fa-spinner fa-spin  gt  lt  i gt as bullets lt  li gt     lt li gt  lt i class  fa-li fa fa-square  gt  lt  i gt in lists lt  li gt   lt  ul gt    The fa-ul and fa-li classes easily replace default bullets in unordered lists

[twitter-bootstrap] Using a Glyphicon as an LI bullet point (Bootstrap 3)

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to glyphicons

Examples related to bulletedlist