0

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>

画像の説明をここに入力
画像の説明をここに入力

1 件の回答 1

2

Bootstrap Icons v1.9.1 を使われているようですが、bi-1-circle-fillにはバグがありv1.10.0で修正されています。v1.10.0以降を使いましょう。

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

.header-icon .bi-1-circle:hover::before {
  content: '\F796';
}
<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>

3
  • ありがとうございます。::beforeにに対してスタイルの変更するのですね。 重ねて恐縮ですが、v1.10.0に変更したのですが、下記アイコンに関して修正ができないようでして。 <i class="bi bi-person"></i>からbi-person-fill <i class="bi bi-bag"></i>からbi-bag-fill 先ほどと同様で-fillのついたアイコンにしたいのですが、他のアイコンでも同様に黒い四角形になってしまいます。 .bi-bag:hover::before{ font-family:'Bootstrap-icons'; content: '\F174'; background-color: #000; } }
    – pepe
    Commented 2023年11月21日 12:21
  • @pepe 「スニペットを実行」のボタンを押せれば 投稿された質問文 に対しては問題が解決していることはわかると思います。スタックオーバーフローは一問一答形式ですので、追加質問は別投稿としてください。その際、本スレッドを解決済みとしてください。
    – sayuri
    Commented 2023年11月21日 12:31
  • 失礼いたしました。ご教示頂きありがとうございました。
    – pepe
    Commented 2023年11月21日 12:34

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。