0

I'm using bootstrap icons (the webfont, not the svg).

I want to apply a background to the icon, contained within its edges. But the colour is applied to the entire element.

For example:

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

<div class="p-3" style="font-size:3rem">
  <i class="bi bi-emoji-smile bg-warning"></i>
  <i class="bi bi-heart bg-danger"></i>
  <i class="bi bi-circle bg-success"></i>
  <i class="bi bi-bluetooth bg-primary"></i>
<div>

I do not want to use the svg option.

lonix
  • 14,255
  • 23
  • 85
  • 176

1 Answers1

2

Please try below code:

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

    <div class="p-3" style="font-size:3rem">
    <i class="bi bi-emoji-smile-fill text-warning"></i>
      <i class="bi bi-heart-fill text-danger"></i>
      <i class="bi bi-circle-fill text-primary"></i>
    <div>

This will fill in the background of the edge. Please let me know if you find any issue with the code.

Kairav Thakar
  • 921
  • 1
  • 7
  • Thanks Kairav! But luckily, those three icons have a "filled" variant. What about an icon that does not? For example, check my update to the question - it shows a "bluetooth" icon which does not have a filled variant... – lonix Nov 28 '22 at 10:16
  • I find almost all the icons are come along with fill variant and in bootstrap there are 684 fill icons. – Kairav Thakar Nov 28 '22 at 10:18
  • bluetooth is already come along with fill variant flow only – Kairav Thakar Nov 28 '22 at 10:19
  • Very true, but a generic solution is required for those cases which lack a fill icon (e.g. bletooth). I was thinking maybe some kind of clipping path but I'm unsure how to do that. – lonix Nov 28 '22 at 10:19