Can we use Bootstrap Icons for Bullet Points?-CodePudding

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 ></i> Buy Milk</li>
  <li><i ></i> Buy Egg</li>
  <li><i ></i> Buy Bread</li>
</ul>

I want to do it from CSS, just like this (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 only want to know if it is possible or not. If it is not possible then I can use either of the two methods above. If yes, then how do I do it?

CodePudding user response：

I think Yes. From inspect in the web, it appear to be the same like with FontAwesome, just different font-family: bootstrap-icons !important and content code, which you can get by inspect the desire icon on their website.

CodePudding user response：

My answer might get you some more flexibility. You can use custom couters for any style type.

li {
  list-style-type: thumbs;
}

@counter-style thumbs {
  system: cyclic;
  symbols: