在导航，CSS中对齐图标字体背景

Question

我在主导航中使用了一个列表项的图标字体。

我把这个图标放入它自己的类中，并给它一个字体大小，以便它与导航的其余部分相匹配。我还必须为图标字体指定一个特定的行高，以便它排成一行。

现在的问题是当我将鼠标悬停在图标上时（我使用的是背景颜色），当你将鼠标悬停在它上面时，下面会有一个间隙。如果我不使用背景颜色，这不会是一个问题，但我真的想保留它。

为了说明我的意思，你可以在这里看到图像...... https://dl.dropbox.com/u/94593656/test.jpg

关于如何纠正这一点的任何想法，以便当你悬停时，下方没有间隙？

我已在此处上传了HTML和CSS ... http://codepen.io/anon/pen/xeCLj

Answer 1

执行此操作的一种方法是将其设置为min-height。

Answer 2

像这样更改iconfont类：

.iconfont {
  font-family: 'EntypoRegular';
  font-size: 25px;
  line-height: 20px;
  vertical-align: middle;
}

使用填充和行高，此链接就像导航栏一样变为40px高。高度不适用于内联元素链接锚，因此我使用了行高。