hover時に1-circleから、1-circle-fillのアイコンに変えたいです。
下記のように記述したところ、画像のように黒色の四角形になってしまいます。
よろしくお願い致します。
.header-icon .bi-i-circle:hover {
font-family: 'Bootstrap-icons';
content: '\F796';
background-color: #000;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>