我为图标使用了 Font Awesome,在悬停时这是我喜欢的结果 enter image description here
而且当我选择了一个链接时我也遇到了这个问题enter image description here
我使用 Bootstrap
.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>
最佳答案
知道了...
奇怪的悬停状态是由字体图标的背景颜色引起的。背景比字符大。使用行高更正此问题,如下所示:
.fa {line-height: 0.85em;}
或者使用此处描述的更好的解决方案:https://stackoverflow.com/a/27382026/2397550 .那么你应该为下面的方 block 使用这个图标:http://fontawesome.io/icon/square/
焦点图标后面的白色区域是因为您这样做了:
.nav > li > a:hover {background-color: transparent;}
这应该是:
.nav > li > a:hover, .nav > li > a:focus {background-color: transparent;}
关于html - 图标分辨率与他的 block ( Font Awesome ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38191639/