无法使字体超棒的菜单图标与邻近的菜单链接

Question

我网站的横向主菜单中的第一个链接是从font-awsome中获取的主页图标。此图标+它的相邻文字，都比该菜单中的其他链接更高\更高。

我试过玩两个元素的Display \ Vertical-align \ Margin \ min-height并没什么帮助......

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

font-icon css是：

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

主菜单链接css是：

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

其他详情：

这是一个Drupal 7，RTL网站。

请帮助将font-awesome图标链接在位置\ tallness中保持同等性，谢谢，

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{}

Answer 2

为sf-menu a标记添加固定的行高也可以修复它。

.sf-menu a {
    display: block;
    line-height: 1.8em;
    position: relative;
}

然后你可以使用图标的位置，无论你制作什么尺寸的图标，只需将li.first a上的填充增加20-25％;

li.first a {
    text-align: center;
    font-size: 0;
}

li.first .fa-home::before {
    font-size: 2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 3

使用Font Awesome的惯例是将字体放在<i>标记<i class="fa fa-home"></i>中，并将其放在文本旁边。

如果您可以将菜单中的标记更改为： <a href="/" title="דף הבית" class="sf-depth-1 active"><i class="fa fa-home"></i>בית</a>您不应该进行任何css更改，文本应该采用其他列表项的大小。

希望有所帮助。