如何修复 FontAwesome 图标上的“a:hover”空白？

Question

我正在使用 Font Awesome 4.2.0 图标，a:hover 将background-color 显示为预期的white，但是当我试图将a 标签上的white 颜色抑制为大小时内部图标，当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

试试这个代码：

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

Answer 2

使用不带正方形的字体真棒图标并使用 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;
}