在 Bootstrap 4 导航栏中使用自定义图标作为按钮答案

【问题标题】：Using custom icons as buttons in Bootstrap 4 navbar在 Bootstrap 4 导航栏中使用自定义图标作为按钮
【发布时间】：2017-06-28 16:31:32
【问题描述】：

我想在 Bootstrap 4 导航栏上放置一些自定义图标按钮。我试过用这样的方式放置按钮：

<a class="nav-item" href="#">
    <img class="png-icon d-inline-block align-middle" src="assets/png-icons/zoom full.png">
</a>

按钮显示在导航栏上，但在顶部对齐。我想让它中间对齐（垂直）。我尝试了各种 CSS 样式，例如 margin-top 和 padding-top，但它并没有改变任何东西。我也试过给我们 class="d-inline-block align-middle"，但图标仍然在顶部对齐。

有人可以帮助我正确使用 Bootstrap 4 导航栏中的图标吗？

【问题讨论】：

【解决方案1】：

short-hack 尝试以下 css：

.align-middle {
    position:relative;
    top:4px
}

否则您可以设置填充而不是行高，或者从图像中删除浮动并将其放置为内联元素...

但是：我会推荐像 icomoon 这样的图标字体工具，用于在导航栏中放置自定义图标。 (http://icomoon.io/app/)

【讨论】：

谢谢！这样可行。使用icomoon.io/app 放置图标有什么好处？
如果你使用iconfonts，你可以像处理文本一样处理它（css颜色、字体大小、文本对齐、悬停效果等等）..而且它只是一个请求，而不是多个-http-requests，如果您需要大量图标...您的网站将加载得更快，并且您拥有比使用 png 更多的选项...并且由于它的矢量格式，它在每个设备中看起来都更干净（没有模糊的边缘) 你看...没有一个原因，仍然使用 png 的图标 :)
但是如果我需要几种颜色的图标，例如用白线绘制的文档图标，上面有一个红色的叉号怎么办。用图标字体可以做到吗？
@Gøngevangen - 抱歉，有点延迟......不是使用 iconfonts，而是使用 svg-icons（也受 icomoon 支持）