CODEWITHSUNDEEP
htmlcssbootstrap-5
Sabal Shrestha
Sabal Shrestha

Reputation: 61

Can we use Bootstrap Icons for Bullet Points?

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?

Upvotes: 2

Views: 2705

Answers (2)

Eezo
Eezo

Reputation: 1771

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/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>

<div>+1</div>

Upvotes: 2

buzz
buzz

Reputation: 1106

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

li {
  list-style-type: thumbs;
}

@counter-style thumbs {
  system: cyclic;
  symbols: 😍 😂 😒;
  suffix: " ";
}
<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>

you can add any type of symbols you like.

Upvotes: 3

Related Questions