垂直居中的离子图标与周围的文字

Question

我正在使用Bootstrap 3和Ion Icons。

鉴于以下HTML包含所有默认的Bootstrap CSS，＆＃34; New Url＆＃34;旁边的加号图标比这样的文字要小得多：

jsFiddle

  <ul class="nav navbar-nav navbar-right">
    <li><a href="../navbar/">Default</a></li>
    <li><a href="#">New URL<i class="icon ion-ios-plus-empty"></i></a></li>
  </ul>

我希望图标与文字大小相同，但是，当我尝试添加以下CSS时，尺寸匹配

jsFiddle

.navbar-default i{
    font-size:26px;
}

将margin-top: -8px;添加到li会使文本与另一个lis对齐，但图标及其文字仍未对齐。

jsFiddle

我还尝试在图标中添加vertical-align: middle;，但图标低于文字：

jsFiddle

有没有更好的方法可以让图标与文字大小相同，并与文字对齐？

Answer 1

你在这里遇到的问题是，图标的渲染块不仅仅是图标本身。图标的渲染块比实际图标高，并包含一些“空白区域”。请参阅下面的屏幕，指示图标的渲染块：元素之前。

没有什么可以做的，因为Ion负责为你生成webfont文件，因此留下了图标上方和下方的“空白区域”。

如果你检查任何图标，你也可以在Ion网站上看到这个：在概述页面上阻止之前。

如果可以，您可以切换到另一个webfont，其中：before块适合图标的实际部分（周围没有空白区域）。或者，您可以使用SVG文件生成自己的webfont（例如，使用Icomoon）。

Answer 2

您可以尝试vertical-align的确切值。下面的例子是。

    vertical-align: -4px;

Answer 3

您必须添加vertical-align: middle才能将文字与图标对齐。

i.icon.ion-ios-plus-empty{
  font-size: 24px;
  vertical-align: middle;
  padding-left: 5px;
}

以下是FIDDLE

Answer 4

在@Regaddi向我展示图标上方和下方的空间是实际离子图标本身的文物，并且无法用CSS操纵时，我通过将图标放置在一个绝对定位的跨度中来修正此问题，这样我就可以移动它无论那个空间如何都是正确的，就像这样：

<ul class="nav navbar-nav navbar-right">
    <li><a href="../navbar/">Default</a></li>
    <li data-toggle=".url-panel-header"><a href="#">New URL<span class="ion-fix"><i class="icon ion-ios-plus-empty"></i></span></a></li>
</ul>


.navbar-default i{
  font-size: 25px;
  margin-left:4px;

}

.ion-fix{
 position:relative;

}
.ion-fix i{
 position:absolute;
 top:-5px;  
}

jsFiddle