我正在使用 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
有没有更好的方法可以使图标与文本大小相同并与文本对齐?
最佳答案
您在这里遇到的问题是图标的渲染 block 不仅仅是图标本身。图标的渲染 block 比实际图标高,并且包含一些“空白”。请参见下面的屏幕,指示图标的呈现 block :元素之前。
您实际上无能为力,因为 Ion 负责为您生成 webfont 文件,因此在图标上方和下方留下“空白”。
您也可以在 Ion 网站上看到这一点,如果您在概览页面上检查任何图标 :before block 。
如果可以,您可以切换到另一种网络字体,其中 :before block 适合图标的实际部分(周围没有空白)。或者您可以使用 SVG 文件生成您自己的网络字体(例如使用 Icomoon )。
关于html - 垂直居中的 Ionic 图标及其周围的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34730037/