Bootstrapでhover時に他のアイコンへ変えたい


Bootstrapでhover時にアイコンを変えたいです。  
しかし、hoverすると画像のように黒い四角形になってしまいます。

よろしくお願いいたします。

[code]

    .bi-person:hover::before {
      font-family: 'Bootstrap-icons';
      content: '\F4DA';
      background-color: #000;
    }
    
    .bi-bag:hover::before {
      font-family: 'Bootstrap-icons';
      content: '\F174';
      background-color: #000;
    }
[/code]

[code]

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    
    <div class="icon">
      <a class="nav_button" href="/user/"><i class="bi bi-person" id="test"></i></a>
      <a class="nav_button" href="/cart/"><i class="bi bi-bag"></i></a>
    </div>
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/RvcLT.png)](https://i.stack.imgur.com/RvcLT.png)




<https://ja.stackoverflow.com/a/96867/4236> でも例示しましたが、変えるべきスタイルは `content`
だけで十分です。今回、 `background-color` まで変えてしまったために黒くなっています。

[code]

    .bi-person:hover::before {
      content: '\F4DA';
    }
    
    .bi-bag:hover::before {
      content: '\F174';
    }
[/code]

[code]

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    
    <div class="icon">
      <a class="nav_button" href="/user/"><i class="bi bi-person" id="test"></i></a>
      <a class="nav_button" href="/cart/"><i class="bi bi-bag"></i></a>
    </div>
[/code]




<https://ja.stackoverflow.com/a/96867/4236> でも例示しましたが、変えるべきスタイルは `content`
だけで十分です。今回、 `background-color` まで変えてしまったために黒くなっています。

[code]

    .bi-person:hover::before {
      content: '\F4DA';
    }
    
    .bi-bag:hover::before {
      content: '\F174';
    }
[/code]

[code]

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    
    <div class="icon">
      <a class="nav_button" href="/user/"><i class="bi bi-person" id="test"></i></a>
      <a class="nav_button" href="/cart/"><i class="bi bi-bag"></i></a>
    </div>
[/code]

