html - 垂直居中的 Ionic 图标及其周围的文本

Question

我正在使用 Bootstrap 3 和 Ion Icons .

给定以下带有所有默认 Bootstrap CSS 的 HTML，“New Url”旁边的加号图标明显小于这样的文本:

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

您在这里遇到的问题是图标的渲染 block 不仅仅是图标本身。图标的渲染 block 比实际图标高，并且包含一些“空白”。请参见下面的屏幕，指示图标的呈现 block :元素之前。

您实际上无能为力，因为 Ion 负责为您生成 webfont 文件，因此在图标上方和下方留下“空白”。

您也可以在 Ion 网站上看到这一点，如果您在概览页面上检查任何图标 :before block 。

如果可以，您可以切换到另一种网络字体，其中 :before block 适合图标的实际部分(周围没有空白)。或者您可以使用 SVG 文件生成您自己的网络字体(例如使用 Icomoon )。