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

Question

我网站水平主菜单中的第一个 link 是从 font-awsome 中获取的主页图标。这个图标 + 它的相邻文本，都比该菜单中的其余 link 出现 higher\taller。

我试过使用它们的 Display\Vertical-align\Margin\min-height 元素，但没有任何帮助...

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

字体图标 css 是：

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

主菜单 links css 是：

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

其他详细信息：

这是一个 Drupal 7，RTL 站点。

请帮助使字体很棒的图标 link 在 position\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

Font Awesome 的惯例是将字体放在  标记  中，并将其放在文本旁边。

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

希望对您有所帮助。

Answer 3

为您的 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%);
}

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

Can't make font-awesome menu icon to be equivilant with neighboring menu links

css

font-awesome

drupal-theming

字体图标 css 是：

主菜单 links css 是：