html - 无论浏览器的字体如何，如何拥有固定的字体大小？

Question

我在(Bootstrap)导航栏中有两个字体图标，一个菜单图标和一个搜索图标:

<div class="menu-icon">
    <i class="fa fa-bars"></i>
</div>
<div class="navbar-brand">
    Website
</div>
<div class="search-icon">
    <i class="fa fa-search"></i>
</div>

CSS:

.menu-icon {
    float: left;
}

.search-icon {
    float: right;
}

.menu-icon, .search-icon {
    font-size: 1.6em;
    padding: .6em 1em;
    cursor: pointer;
    background: #f55;
}

这在一种浏览器上效果很好，但在其他浏览器上效果不佳，因为它们有自己不同的字体大小，也可以在它们的设置中更改。

不同浏览器之间的这种大小差异需要不同的填充或 font-size。如果您为它们设置背景颜色，它们将清晰可见。

如何避免这种字体差异？

Answer 1

如果可能的话，我会使用背景图像图标而不是字体图标，以避免字体大小问题。