1

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

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

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

画像の説明をここに入力

1 件の回答 1

2

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

.bi-person:hover::before {
  content: '\F4DA';
}

.bi-bag:hover::before {
  content: '\F174';
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

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

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