带有文本的 Fontawesome 图标的垂直居中答案

【问题标题】：Vertical centering of Fontawesome icons with text带有文本的 Fontawesome 图标的垂直居中
【发布时间】：2014-10-22 10:13:45
【问题描述】：

我试图将 Fontawesome 图标垂直居中。这些图标必须在父元素内居中。问题是，只有当我将鼠标悬停在一个元素上时，我才会在 Firefox (31) 中看到一些工件。

请参阅下面的 jsfiddle 链接： http://jsfiddle.net/8ap92j7z/1/

    <span class="big-icon">
    <a href="#">
        <span class="fa-stack fa-lg">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-sitemap fa-stack-1x fa-inverse"></i>
            <span class="text">Sitemap</span>
        </span>
    </a>
</span>

我做错了什么以及如何解决？

【问题讨论】：

标签： css html firefox font-awesome-4

【解决方案1】：

试试.big-icon a {text-decoration: none;} - jsFiddle Example

【讨论】：

您的方法绝对可以解决问题。但是我想使用带下划线的链接，因为这就是它们在整个站点中的样式。（我赞成你的回答）
已修复，只需添加一个类选择器以仅针对 .big-icon 中的 a 标记

【解决方案2】：

添加你的容器height 和line-height 一样为你的字体-awesome 它会让你的图标居中。

【讨论】：