如何解决＆＃39; a：hover＆＃39; Font Awesome图标上的空白区域？

Question

我正在使用Font Awesome 4.2.0图标而a:hover将background-color显示为预期的white，但当我尝试抑制white颜色时a标记为内部图标的大小，当margin，padding和height设置为0时，它拒绝更改（变小）。但是，border-radius将生效，但这还不够好。

#social-media-icons > a{
    color:inherit;
    /*border-radius:100% 100% 100% 100%;*/
    padding:0;
    margin:0;
    height:0; 
}

如何将a标记的大小限制为仅在Font Awesome图标中显示颜色white？

以下是Bootstrap环境中的代码：Bootply Code Editor

Answer 1

使用没有正方形的字体真棒图标和使用css的正方形样式 - 这将允许您更改图标本身的字体颜色，同时使正方形保持相同的颜色。的 demo

#social-media-icons i {
    border-radius: 5px;
    padding: 5px;
    width: 42px;
    background: #fff;
    color: #3f729b;
}

#social-media-icons i:hover {
    background:#25445d;
    color: #25445d;
}

Answer 2

试试这段代码：

#social-media-icons > a{
  display: block;
}