Html 字体真棒图标在登台时看起来还不错，但一旦上线，就开始与顶部对齐 我使用字体很棒的图标，所有的东西都在中间对齐。一旦网站上线，所有的字体图标都会升到顶部，我不知道为什么。我比较了chrome开发者工具上使用的css，但到目前为止我看不出有什么不同

这是主页的链接。您可以看到顶部导航栏上的放大镜、滑块下的所有社交网络按钮以及“按学位级别浏览学校”旁边的菜单图标都向上移动

希望我能得到任何提示

--更新

---

哇，谢谢你的回答！然而，我必须向大家道歉，因为我今天检查了这个网站，它看起来应该是这样的，而我没有更改任何代码。现在我很好奇为什么这样的事情是可能的

我对此不确定，希望这是因为使用了不同的线高度。。但请尝试更新下面的类“.fa”。希望这能解决你的问题

.fa {
    line-height: inherit!important;
}

尝试添加以下内容：

.fa {
    transform: translate(0, -50%);
    top: 50%;
    position: relative;
}

---

不要更改

.fa

CSS，这是每个图标都需要的，并且会破坏您拥有的所有其他图标

相反，将以下内容添加到css中：

.search-trigger {padding:15px;}

我在Chrome上测试过，效果很好。

试试：

.toggle-make a {
    display: inline-block;
    float: none;
}

---

我和Chrome Inspector一起玩过，似乎浮动与此有关。据我所知，您正在使用

display:block具有宽度但没有高度。
您需要添加此代码

.fa-twitter:before{
  position: relative;
  top: 8px;
}

另外，请不要说添加填充。在登台时，它看起来很好，没有添加填充。您比较了所有css或从live到登台，或者只比较了相关的位？fa元素确实缺少任何（行）高度。从其父元素继承它也是我的建议。尽管它在不使用！也很重要！除非绝对必要，否则不应使用“重要”。