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

Question

我在font-awesome中有以下代码：

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。

如何才能使悬停行为正确：每个图标的边界不应该延伸并与另一个图标重叠？

Answer 1

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

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

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

}