Create unordered list with Bootstrap icon

Question

Hi,

Does anyone know how to create unordered list using Bootstrap icons? It’s possible with Fontawesome, but I can’t figure out how to do it with Bootstrap icons.

Thanks

solved 0
chris11 2023-01-25T11:30:10+00:00 1 Answer 38 views
0

Answer ( 1 )

  1. Tamas
    0
    2023-01-25T11:42:24+00:00
    Reply
    This answer was edited.

    Create an unordered list. It’s best to wrap it inside a div like this:

    <div class="bi_ul">
<ul>
<li class="bi">test</li>
<li class="bi">test</li>
<li class="bi">test</li>
<li class="bi">test</li>
</ul>
</div>

    Here I added a class “bi_ul” to the div. Also don’t forget to can in the icons.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

    First remove the default list style:

    .bi_ul ul {
list-style: none;
}

    You can also add some padding to the list items so they are not too close to each other:

    .bi_ul ul li {
padding: 1px 0 6px 15px;
}

    Then you need to add a pseudo element to each list items like this:

    .bi_ul ul li::before {
content: "f280";
font-weight: 900;
margin-left: -11px;
margin-right: 6px;
font-size: 0.6rem;
vertical-align: middle;
}

    The important thing is the value of the content. You can get the code of the icon from the individual icon page from the bootstrap icon site.

    With this, you should see something like this:

    Best answer

Leave an answer