如何降低 fontawesome 文本的高度？

Question

我的网站正在使用 fontawesome。在网站上，其中一个图标（fa-arrows-h）被包裹在span 标签中，基本上是这样的：

<span id="myArrow">
    <i class="fa fa-arrows-h"></i>
</span>

我在外部样式表中为此箭头设置了各种样式，包括 :hover 过渡。其他样式包括字体大小 41px 和箭头具有绝对位置。我还将光标设置为“指针”，红色箭头在悬停时变为橙色（使用 CSS3 样式：transition: all 0.5s ease 0s;）。

编辑：这里是所有的 CSS 规则：

#myArrow {
    display: none;
    font-size: 41px;
    position: absolute;
    z-index: 100;
    color: red;
    transition: all 0.5s ease 0s;
}

#myArrow:hover {
    color:orange;
    cursor:pointer;
}

这是一些淡入箭头的jQuery：

$("#myArrow").css({"left" : (o.left + 740) + "px", "top" : (o.top) + "px"}).fadeIn(500);

一个令人讨厌的事情是悬停效果出现在文本上方/下方约 20 像素处。也就是说，当光标的底部接触到箭头，或者光标的尖端在箭头下方大约 20px 时，就会发生悬停过渡。

我尝试了各种方法，甚至将span 和i 的样式设置为

style="line-height:0;height:0"

并且箭头仍然出现，与上述相同的悬停问题（我也为两个标签单独尝试了这种样式）。

我认为问题也可能与 css 显示有关，所以我尝试将 span 和 i 都设置为

- block
- inline
- inline-block

没有成功。

我还将两个标签都设置为 padding:0 没有成功。

请注意，这个 20 像素外的悬停过渡只发生在垂直方向；当水平（从左或右）接近箭头时，当用户实际将鼠标悬停在图标上时会发生悬停转换。

谁能建议当用户从上方或下方接近此图标并实际将鼠标悬停在 fontawesome 图标上时，我将如何进行悬停转换，而不是当光标距离 20 像素时？

Answer 1

虽然不是很优雅，但我只是更改了#myArrow 的高度并将其溢出设置为隐藏，然后我使用边距将i 元素定位在其中。

#myArrow {
    font-size: 41px;
    position: absolute;
    z-index: 100;
    color: red;
    transition: all 0.5s ease 0s;
}

#myArrow:hover {
    color:orange;
    cursor:pointer;
}

#myArrow {
    height:20px;
    overflow:hidden;
}

#myArrow i {
    margin-top:-10px;
    display:block;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<span id="myArrow">
    <i class="fa fa-arrows-h"></i>
</span>