悬停在字体真棒的图标上：如何更改图标的大小或边缘？答案

【问题标题】：Hovering on icons with font awesome: how to change the size or edges of the icons?悬停在字体真棒的图标上：如何更改图标的大小或边缘？
【发布时间】：2013-09-09 01:13:51
【问题描述】：

我有以下代码，字体真棒：

HTML：

<div> 
    <i class='icon-chevron-down font-big'></i>
</div>

<div>
    <i class='icon-chevron-down font-big'></i>
</div>

CSS：

.font-big {
    font-size: 30px;
    line-height: 6px;
}
.font-big:hover {
    opacity: .5;
}

问题是图标重叠，如you can see on this jsFiddle。

我怎样才能使悬停行为正确：每个图标的边界不应延伸和重叠？

【问题讨论】：

小提琴显示了一个书面的句子，仅此而已..您是否尝试仅在其中一个上添加边距？

标签： css font-size font-awesome

【解决方案1】：

看看这个 jsfiddle： http://jsfiddle.net/fTdRS/

您可以尝试将图标放入类似于此示例的内部 div。

div.inner {
    xdisplay: block;
    width: 280px;
    height: 80px;
    display:table-cell;
    vertical-align:middle;

}

【讨论】：