如何降低 fontawesome 文本的高度？

Question

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

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

我在外部样式表中为此箭头设置了各种样式，包括 :hover 过渡。其他样式包括 font-size 41px 和箭头具有绝对位置。我还将光标样式设置为 "pointer" 并且红色箭头在悬停时变为橙色（使用 CSS3 样式：过渡：所有 0.5s 缓动 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);

一件烦人的事情是悬停效果发生在大约 20px above/below 文本处。也就是说，当光标的底部接触到箭头，或者光标的尖端在箭头下方大约 20px 时，就会发生悬停过渡。

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

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

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

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

- block
- inline
- inline-block

没有成功。

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

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

任何人都可以建议当用户从上方或下方接近此图标并实际悬停在 fontawesome 图标上时，而不是当光标距离 20px 时，如何使悬停过渡发生？

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>

如何降低 fontawesome 文本的高度？

How does one reduce the height of fontawesome text?

css

font-awesome