Can we use Bootstrap Icons for Bullet Points?

Issue

I want to know whether we can use Bootstrap icons for bullet points (using CSS) or not. I know that we can use FontAwesome to do that, but I just want to confirm if it is possible to do that using Bootstrap.

While I do know that we can use the following method :

<ul>
  <li><i class="bi bi-check"></i> Buy Milk</li>
  <li><i class="bi bi-check"></i> Buy Egg</li>
  <li><i class="bi bi-check"></i> Buy Bread</li>
</ul>

I want to do it from CSS, just like this (An example using FontAwesome):

<style>
  ul li:before {    
    font-family: 'FontAwesome';
    content: '\f00c';
    margin:0 5px 0 -15px;
    color: #f00;
  }
</style>
<ul>
  <li>Buy Milk</li>
  <li>Buy Egg</li>
  <li>Buy Bread</li>
</ul>

I want to know how to do it using Bootstrap. If it is not possible then I can use either of the two methods above. If yes, then how do I do it?

Solution

Yes. Include the icon stylesheet in the head tag or @import in css file follow intruction from the site. Then in :before, you declare font-family: bootstrap-icons !important; and content with whatever icon you want, ie the hearth icon will have the code as \F59E and so on.

div:before {
    content: "\F59E";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
  margin-right: 5px;
}

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

<div>+1</div>

Answered By - Eezo