css - 无法使超棒的菜单图标与相邻的菜单链接等效

Question

我站点的水平主菜单中的第一个链接是从 font-awsome 中获取的主页图标。这个图标 + 它的相邻文本，都比该菜单中的其余链接显得更高\更高。

我尝试使用它们两个元素的 Display\Vertical-align\Margin\min-height 并没有任何帮助...

当你进入我的站点时，在任何页面中都可以直接看到问题。 Here is a link to my site's homepage .

字体图标 css 是:

.fa-home::before {
    content: "";}

主菜单链接 css 是:

#superfish-1 .sf-depth-1 a {
    color: #779573;
    font-size: 13.5px;
    text-align: right;}

其他详细信息:

这是一个 Drupal 7，RTL 站点。

---

请帮助使字体超棒的图标链接在位置\高度上与所有其他链接同质，谢谢，

Answer 1

改变这个:

.fa{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

为此:

.fa:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

这应该可以解决问题。因此，您拥有的不是:.fa{}，而是 .fa:before{}