带有他的块的图标分辨率（Font Awesome）答案

【问题标题】：Icon resolution with his block (Font Awsome)带有他的块的图标分辨率（Font Awesome）
【发布时间】：2016-07-05 06:15:03
【问题描述】：

我使用 Font Awesome 作为图标，在悬停时我喜欢这个结果enter image description here

当我选择了一个链接时我也遇到了这个问题enter image description here

我使用引导程序

.nav > li > a:hover
{
    background-color: transparent;
}
.iconetwitter
{
    color: #ffffff;
    width: auto;
    height: 33px;
    position: relative;
    border-radius: 5px;
    transition: background-color color 0.2s, font-size 0.2s , ease-in-out;
}
.iconetwitter:hover , .iconetwitter:focus ,.iconetwitter:active
{
    color: #1DA1F2;
    background-color: white;
}

<ul class="nav">
                    <li class="contacteicone col-md-3">
                        <a href="#" class="monicone">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-twitter-square iconetwitter fa-stack-2x"></i>
                            </span>
                        </a>
                    </li>
</ul>

【问题讨论】：

能否提供您的代码链接？
@JoostS 我不知道怎么做？
您的网站在线吗？然后发个链接。不是在线吗？然后发送一个codepen，在其中粘贴html、css和js：codepen.io
@JoostS 非常感谢您向我展示了这个网站！就是这样codepen.io/anon/pen/grRGBN
@JoostS 我也使用 bootstrap 和字体！

标签： html css twitter-bootstrap font-awesome

【解决方案1】：

知道了……

奇怪的悬停状态是由字体真棒图标的背景颜色引起的。背景比人物大。使用 line-height 进行更正，如下所示：

.fa {line-height: 0.85em;}

或者使用这里描述的更好的解决方案：https://stackoverflow.com/a/27382026/2397550。然后你应该使用这个图标作为底层正方形：http://fontawesome.io/icon/square/

焦点图标后面的白色区域是因为您这样做了：

.nav > li > a:hover {background-color: transparent;}

这应该是：

.nav > li > a:hover, .nav > li > a:focus {background-color: transparent;}

【讨论】：