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


hover時に1-circleから、1-circle-fillのアイコンに変えたいです。

下記のように記述したところ、画像のように黒色の四角形になってしまいます。  
よろしくお願い致します。

[code]

    .header-icon .bi-i-circle:hover {
      font-family: 'Bootstrap-icons';
      content: '\F796';
      background-color: #000;
    }
[/code]

[code]

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    
    <div class="header-icon">
      <a class="button" href="#"><i class="bi bi-1-circle"></i></a>
      <a class="button" href="#"><i class="bi bi-1-circle-fill"></i></a>
    </div>
[/code]

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




Bootstrap Icons v1.9.1 を使われているようですが、[`bi-1-circle-
fill`にはバグがあり](https://github.com/twbs/icons/issues/1385)、[v1.10.0で修正されています](https://github.com/twbs/icons/releases/tag/v1.10.0#:%7E:text=%231425%3A%20Adjust%20fill%2Drule%20of%201%2Dcircle%2Dfill)。v1.10.0以降を使いましょう。

加えて設定しているCSSセレクタも間違っています。まず、`bi-i-
circle`（アイ）ではなく`bi-1-circle`（イチ）です。更に`::before`疑似要素の`content`スタイルを変更する必要があります。

[code]

    .header-icon .bi-1-circle:hover::before {
      content: '\F796';
    }
[/code]

[code]

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <div class="header-icon">
      <a class="button" href="#"><i class="bi bi-1-circle"></i></a>
      <a class="button" href="#"><i class="bi bi-1-circle-fill"></i></a>
    </div>
[/code]




Bootstrap Icons v1.9.1 を使われているようですが、[`bi-1-circle-
fill`にはバグがあり](https://github.com/twbs/icons/issues/1385)、[v1.10.0で修正されています](https://github.com/twbs/icons/releases/tag/v1.10.0#:%7E:text=%231425%3A%20Adjust%20fill%2Drule%20of%201%2Dcircle%2Dfill)。v1.10.0以降を使いましょう。

加えて設定しているCSSセレクタも間違っています。まず、`bi-i-
circle`（アイ）ではなく`bi-1-circle`（イチ）です。更に`::before`疑似要素の`content`スタイルを変更する必要があります。

[code]

    .header-icon .bi-1-circle:hover::before {
      content: '\F796';
    }
[/code]

[code]

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <div class="header-icon">
      <a class="button" href="#"><i class="bi bi-1-circle"></i></a>
      <a class="button" href="#"><i class="bi bi-1-circle-fill"></i></a>
    </div>
[/code]

