Bootstrap icons with background colour

Question

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/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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.

Answer 1

Please try below code:

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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.