CSS 图标悬停创建一个框

Question

我目前有一个图标标签，我正在尝试为图标设置 :hover 的样式。它来自 font-awesome 库。我的 CSS 非常简单。

i:hover {
    background-color: white;
    box-sizing: border-box;
}

当我将鼠标悬停在我的图标上时，我希望只有图标本身具有悬停效果，而不是我的图标周围的边界框。我怎样才能做到这一点？

Answer 1

试试这个

i{
color:yellow;
font-size:22px;
}
a:hover .fa-google{
color:red;
}
.fa-facebook-square:hover{
color:blue;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
If its inside an element

<br>
<a href="#"><i class="fa fa-google"></i> Hover Here</a>
<br>
Without another element
<br>
<i class="fa fa-facebook-square"></i>&nbsp;Hover the Icon