Create unordered list with Bootstrap icon

Asked by: chris11
Date:
Viewed: 338
Answers: 1
  • 0

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

Answers

Answer by: ChristianKovats

Answered on: 25 Feb 2023 Marked as best by question author

  • 1

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:

unordered list with bootstrap icons

 

 

 

Please log in to post an answer!